Google Tag Manager and Google Analytics Event Tracking

google tag manager and google analytics with event tracking.md

Google Tag Manager and Google Analytics with Event Tracking using gtag.js

Setup gtm container Add the code to webpage. Setup a Google Analytics property, get the GA Tracking ID Add gtag.js to the webpage before GTM code.

<script async src="https://www.googletagmanager.com/gtag/js?id=######"></script>

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){
  dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', '########');
</script>

In the event that the GTM tag contains a pageview trigger in the GA code, you'll need to add this to the gtag config line. This will prevent multiple pageviews from firing.

gtag('config', '########', { 'send_page_view': false });

After you add gtag, then add GTM:

<!-- Google Tag Manager -->
<script>(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-####');</script>
<!-- End Google Tag Manager -->

Then right after the body tag, add this:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-####"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

That enables event tracking:

onclick="gtag('event', 'click', {'event_category': 'testlinks', 'event_label':'test event tracking', 'transport_type': 'beacon'});"

Option 2: Google Tag Manager and Google Analytics with Google Tag Manager Tags/Triggers/Variables (no gtag.js)

Add GTM:

<!-- Google Tag Manager -->
<script>(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-####');</script>
<!-- End Google Tag Manager -->

Then right after the body tag, add this:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-####"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

That installs Google Tag Manager.

Above the Google Tag Manager code in the tag, add a new javascript file, this needs to be place before the GTM code.

<script src="/js/event_tracking.js"></script>

The contents of event_tracking.js will look something like this:

document.addEventListener('click', function (event) {

    // If the clicked element doesn't have the right selector, bail
    if (!event.target.matches('#testButton')) return;

        // Don't follow the link
        event.preventDefault();

        var v_category = 'testButton';
        var v_action = 'Click';
        var v_label = 'google tag manager link';
        var v_value = 1;

        window.dataLayer=window.dataLayer||[];
        window.dataLayer.push({
            'event': 'clickEvent',
            'v_category': v_category, 
            'v_action' : v_action, 
            'v_label' : v_label,
            'v_value' : v_value        
        });

        // Log the clicked element in the console
        console.log(event.target);

}, false);

Setup Google Tag Manager

This assumes that you have a GTM container setup and ready to go.

On the Variables page, make sure all of the boxes are checked under Pages, Clicks, and under Utilities Event is checked.

Under user-defined variables, add 4 new variables:

v_category, Data Layer Variables
v_action, Data Layer Variables
v_label, Data Layer Variables
v_value, Data Layer Variables

On the Triggers page, create a new trigger with these settings:

Trigger Type: Custom Event
Event Name: clickEvent
This trigger fires on All Custom Events.

On the Tags page, create a GA Universal Analytics tag:

Track Type: Event
Category, Action, Label, Value and set all of those to the custom variables we setup earlier
Google Analytics Settings - choose the variable for GA Tracking Code.
Triggering: select the trigger you made in the previous step.

Now in your HTML, add a hyperlink:

<a href="#" id="testButton">This is a test hyperlink</a>

Note the ID on the hyperlink. This must match the ID referenced in the js file above.

Open GTM, open GA, test the link in real-time to make sure everything is recording.