macolo/google-tag-manager-example-page.html

## google-tag-manager-example-page.html
<html>
<head>
<script>
    // this is always on the very top of the page. The higher up the better,
    // but definitely above all other GTM related code
    window.dataLayer = window.dataLayer || [];
</script>

<script>
    // this needs to be above the GTM base tag.
    // never initialize the dataLayer directly, always use .push() because you never know
    // if some other script on the site is faster and has already pushed data, which you would
    // overwrite. So .push() ensures that no overwrite happens.
    dataLayer.push(
        // dataLayer objects you define here are available in GTM right from the start
        // they dont need to be listend to via a GTM trigger and therefore dont need an event name.
        // this is where you define stuff that should be available for tags that trigger "on page load"
        // in GTM you can just create a dataLayer variable that points to, for example "customerType"
        // and then add that variable to a field in GTM, for example a Google Analytics pageview settings field
        {
            'customerType': "{{ app.user.customerTypeGA }}"
        }
    );


    // GA ecommerce example
    // put this only on the order confirmation page (OCP)
    // this data is available directly in the page view, just activate enhanced ecommerce in the GA settings
    // in your GTM container for the GA base tag that handles the page view and the data is taken from here automagically
    dataLayer.push({
        'ecommerce': {
            // ...
            // see https://developers.google.com/tag-manager/enhanced-ecommerce for the full thing
        },
    });

    // the following is an example for Google's Dynamic Remarketing
    // put this on all product detail pages
    dataLayer.push({
        'ecomm_prodid': '{{product_id}}',
        'ecomm_pagetype': '{{page_type}}',
        'ecomm_totalvalue': '{{product_price}}',
    });

</script>

<script> // GTM base code snippet for head </script>

<!-- More head stuff -->

</head>

<body>
<script> // GTM base code snippet for body </script>

<div>
<script>
    // this will be loaded after the GTM initialises.
    // therefore you need to add this object to GTM dataLayer via .push()
    // and include an event so that in the GTM trigger configuration you
    // can catch this.
    // you also use dataLayer.push() when you want to add the dataLayer object
    // based on a user interaction such as a click, as the click happens way after
    // the GTM has initialized.
    dataLayer.push({
        'event': 'myCustomClickEvent',
        'someData': 123,
        'dataWithSubItems': {
            // you can access subitems in GTM dataLayer variable via a dot notation
            // i.e.: dataWithSubItems.itemName
            'itemName': 'def',
        },
    });

    // this is a standard what.digital custom event implementation for onclick events
    // this can be in the page's code, or it can also be in a custom html tag in GTM for more flexibility.
    // it's best to defer execution until all other js has loaded: https://blog.typodrive.com/2019/04/06/how-to-defer-javascript-execution/
    jQuery('body').on('click', '#form button', function() {
        dataLayer.push({
            'event': 'generic_event',
            'category': 'conversions',
            'action': 'contact form submit button',
            'label': jQuery('#form').find('input#age').val(),
            // 'value': ''
        });
    });

</script>

</div>
</body>
</html>
	<html>
	<head>
	<script>
	// this is always on the very top of the page. The higher up the better,
	// but definitely above all other GTM related code
	window.dataLayer = window.dataLayer \|\| [];
	</script>

	<script>
	// this needs to be above the GTM base tag.
	// never initialize the dataLayer directly, always use .push() because you never know
	// if some other script on the site is faster and has already pushed data, which you would
	// overwrite. So .push() ensures that no overwrite happens.
	dataLayer.push(
	// dataLayer objects you define here are available in GTM right from the start
	// they dont need to be listend to via a GTM trigger and therefore dont need an event name.
	// this is where you define stuff that should be available for tags that trigger "on page load"
	// in GTM you can just create a dataLayer variable that points to, for example "customerType"
	// and then add that variable to a field in GTM, for example a Google Analytics pageview settings field
	{
	'customerType': "{{ app.user.customerTypeGA }}"
	}
	);


	// GA ecommerce example
	// put this only on the order confirmation page (OCP)
	// this data is available directly in the page view, just activate enhanced ecommerce in the GA settings
	// in your GTM container for the GA base tag that handles the page view and the data is taken from here automagically
	dataLayer.push({
	'ecommerce': {
	// ...
	// see https://developers.google.com/tag-manager/enhanced-ecommerce for the full thing
	},
	});

	// the following is an example for Google's Dynamic Remarketing
	// put this on all product detail pages
	dataLayer.push({
	'ecomm_prodid': '{{product_id}}',
	'ecomm_pagetype': '{{page_type}}',
	'ecomm_totalvalue': '{{product_price}}',
	});

	</script>

	<script> // GTM base code snippet for head </script>

	<!-- More head stuff -->

	</head>

	<body>
	<script> // GTM base code snippet for body </script>

	<div>
	<script>
	// this will be loaded after the GTM initialises.
	// therefore you need to add this object to GTM dataLayer via .push()
	// and include an event so that in the GTM trigger configuration you
	// can catch this.
	// you also use dataLayer.push() when you want to add the dataLayer object
	// based on a user interaction such as a click, as the click happens way after
	// the GTM has initialized.
	dataLayer.push({
	'event': 'myCustomClickEvent',
	'someData': 123,
	'dataWithSubItems': {
	// you can access subitems in GTM dataLayer variable via a dot notation
	// i.e.: dataWithSubItems.itemName
	'itemName': 'def',
	},
	});

	// this is a standard what.digital custom event implementation for onclick events
	// this can be in the page's code, or it can also be in a custom html tag in GTM for more flexibility.
	// it's best to defer execution until all other js has loaded: https://blog.typodrive.com/2019/04/06/how-to-defer-javascript-execution/
	jQuery('body').on('click', '#form button', function() {
	dataLayer.push({
	'event': 'generic_event',
	'category': 'conversions',
	'action': 'contact form submit button',
	'label': jQuery('#form').find('input#age').val(),
	// 'value': ''
	});
	});

	</script>

	</div>
	</body>
	</html>