Google Tag Manager
GTM
https://tagmanager.google.com/
Google Tag Manager is a site container used for storing and triggering scripts.
These then can be used for tracking.
Systems
Below are links to pages for different systems.
These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.
| Self-Host System | On-site Builder Systems | Chat Systems |
|---|---|---|
| CS-Cart | Bigcommerce | CollectChat |
| Joomla | Ecwid | HubSpot Chat |
| Magento 1.x | EKMPowershop | Jivo |
| Magento 2.x | MyshopBlocks | LiveChat |
| OpenCart | Shopify | PureChat |
| Prestashop | Squarespace | Tawk |
| Wordpress | Wix | Tidio |
| X-Cart | Yell | ZenDesk |
| Zen Cart | Zoho |
Useful Info
Generic jQuery Form Listener
If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,
It may be worth trying this generic form listener.
depending on what the jQuery is called when initialized you may need to change "jQuery" to "$" in the code below.
create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.
<script>
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
if (~settings.url.indexOf("/contact/form/process/")) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
}
});
});
</script>
note: the form must be using the actual jQuery's Ajax method to perform the request for this to work
Unique Page Views
You can track unique page views by storing a value in the sessionStorage variable. This can be useful for tracking forms where only a thank you page is available track.
Create a tag that only fires on the page you want to track
<script>
var gtm_fs_count = 1;
var page_path = "{{Page Path}}".replace(/\//g, 'F_SLASH');
if (sessionStorage[page_path]) {
gtm_fs_count = gtm_fs_count+1;
sessionStorage.setItem(page_path, gtm_fs_count);
} else if(!sessionStorage[page_path]) {
sessionStorage.setItem(page_path, gtm_fs_count) ;
}
</script>
Create a custom JS variable to retrieve the value:
function() {
var page_path = "{{Page Path}}".replace(/\//g,"F_SLASH");
return parseInt(window.sessionStorage[page_path]);
}
Then update the trigger to the variable is less than 2 as well as its existing conditions
Cookie Consent Banner & Consent Mode V2
For clients that don't have this setup & functioning already, its possible to setup a consent mode friendly cookie banner using the below JS: Within the .zip, the file is /build/cookieconsent.js Cookieconsent-master.zip
This file will need to be hosted somewhere that is accessible for the client site. Once this has been done the below script will need to be added to the site, before GTM is loaded.
<script src="{{cookieconsent.js}}"></script>
<script>
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
window.CookieConsent.init({
categories: {
// Unique name.
necessary: {
needed: true,
wanted: true,
checked: true,
// Language settings for categories.
language: {
locale: {
en: {
name: 'Strictly Necessary Cookies',
description: 'Cookies Required for the site to function as intended.',
},
}
}
},
analytics: {
needed: false,
wanted: false,
checked: false,
language: {
locale: {
en: {
name: 'Analytics',
description: 'Cookies used by Google & other 3rd party analytics services.',
},
}
}
}
},
consentModeControls: {
ad_storage: 'analytics',
ad_user_data: 'analytics',
ad_personalization: 'analytics',
analytics_storage: 'analytics'
},
});
</script>
<script>
if (localStorage.getItem('consentMode') === null) {
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied'
});
} else {
gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
}
</script>