Google Analytics / Tag Manager - Event Tracking - I'm confused

Question

I'm developing a webpage and have been asked to instrument the back end to record user clicks on links. I found google analytics and thought that would provide all the tracking they could ever want. So I set up a Google analytics account. In the head of the webpage I added:

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

I've then added a button to my page like so:

<a href="didyouknow.html" class="btn btn-primary" onclick="trackOutboundLink(this, 'Internal Links', 'Did You Know'); return false;">More</a>

I've then been trying to figure out how to track link clicks. I've come across 3 differing approaches and I don't know what to use in my case:

function trackOutboundLink(link, category, action) {
    try {
        _gaq.push(['_trackEvent', category, action]);// OPTION 1
        ga('send', 'event', category, action);       // OPTION 2
        gtag('event', category, action);             // OPTION 3
    } catch (err) {
    }
    setTimeout(function () {
        document.location.href = link.href;
    }, 100);
}

It seems from what I've read that OPTION 1 is outdated. OPTION 3 seems most in keeping with the gtag code in the script I had to add. But then I'm not sure if that requires also subscribing to Google Tag Manager? It's difficult for me to test because a system administrator has to deploy my webpages and scripts to the server and is not very responsive at present. Can I also test that this works when running the webpage locally on my PC? Thanks

Answer 1

Gtag - is Google's newest implementation for the Analytics API for web. It doesn't require Google double click to function (but is based around the doubleclick code so allows for easier integration later should you choose to use it).

To track a link with this method:

function trackOutboundLink(link, category, action) {
    try {

       gtag('event', 'play', {
         'send_to': 'UA-MYCODEXX-1',
         'event_category': 'Videos',
         'event_label': 'Fall Campaign'
       });

    } catch (err) {
    }
    setTimeout(function () {
        document.location.href = link.href;
    }, 100);
}

See the migration guide for help on the differences that this newest version brings (versus other code you may have found on the web). https://developers.google.com/analytics/devguides/collection/gtagjs/migration

As for debugging - there's a Chrome plugin for Analytics over here:

https://chrome.google.com/webstore/detail/page-analytics-by-google/fnbdnhhicmebfgdgglcdacdapkcihcoh?hl=en

I've successfully used this to debug local events previously as it will give some output in the console.

Answer 2

Your google analytics script is correct and including this inside the head is correct.

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

Event tracking would be gtag when using the latest google analytics script.

gtag('event', 'Title goes here', {'event_category': 'Category goes here','event_label': 'Label goes here'});

Best way to test this would be login to your GA account, on this specific property under the reports menu on the left you will find Real-Time. Under Real-time you have the events tab.

Clicking on your onClick event from your website should then trigger an event to show inside the events tab, if you see this happening you know your events are firing. This can be tested from local PC.

This can be done with Tag Manager as well but its a different setup process.