This guide will explain how to use Google Tag Manager to track Formyoula online form.
- Add the following javascript snippet on the start of the first page of the form.
- Update GTM-XXXXXXX with Google Tag Manager id.
// Check to make sure Google Tag Manager is not already installed
if ( $( 'script[src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"]' ).length < 1 ) {
( function( w, d, s, l, i ) {
w[ l ] = w[ l ] || [];
w[ l ].push( {
'gtm.start': new Date().getTime(),
event: 'gtm.js'
} );
var f = d.getElementsByTagName( s )[ 0 ],
j = d.createElement( s ),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore( j, f );
} )( window, document, 'script', 'dataLayer', 'GTM-XXXXXXX' );
}
- Add the below code to every page for tracking with different pageName and pageTitle properties.
- We will use this dataLayer.push as a triggering condition in GTM (that activates the GA Pageview tag) and then send the title and page name (page over to GA).
- Follow this for more info on data layer https://developers.google.com/tag-platform/tag-manager/web/datalayer
// The data layer is an object used by Google Tag Manager and gtag.js to pass information to tags.
window.dataLayer = window.dataLayer || [];
// Events or variables can be passed via the data layer, and triggers can be set up based on the values of variables.
window.dataLayer.push( {
event: 'virtualPageview',
pageName: 'Main Page',
pageTitle: 'Formyoula Page 1' //some arbitrary name for the page/state
} );
- Go to Google Tag Manager workspace.
- Create variables in Google Tag Manager.
- Create a Custom Event.
- Go to Tags > New > GA4 event tag
- GA4 configuration tag (that you should have created before). This tag should fire on All Pages.
- Disable the checkbox in the GA4 configuration tag.
- Publish the changes and start tracking.
Don't hesitate to contact us at [email protected] or the Formyoula in-app chat for any questions.🙂