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. Make sure to swap cookieconsent.js with the location of the js file.

<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>

Optional, but to make it look slightly better you could reduce the opacity:

<style>
    #cconsent-bar {
      opacity: 0.9;
    }
</style>