AddThis tracking with GTM

AddThis tracking with GTM.md

AddThis event tracking to Google Analytics, via Google Tag Manager

Attaches event listeners to the addthis object and pushes them to GTM's dataLayer.

Necessary because AddThis' built-in GA "integration" doesn't work with Universal Analytics, or GTM. 😒

See also:

• AddThis docs
• Simo Ahava's guide to generic Event passthrough.
• Export an example implementation from our Container.

Adapted from @skardhamar's work.

steps

• Create the Generic Event tag, trigger & variables as per Simo's guide.
• Create a Tag of type 'Custom HTML', and copy the contents of addthis.gtm-tag.html into it.
• Set the Trigger to be 'All Pages', or preferably some Page Load that will only fire on pages where AddThis is used.
• Test with Preview Mode and the Tag Assistant.

event object example

From a blog list view, clicking an article's "Share to Twitter" AddThis button:

{
    "remoteEvent": {
        "data": {
            "imp_url": 0,
            "url": "https://www.wnswlhd.health.nsw.gov.au/our-health-blog/Lists/Posts/Post.aspx?ID=32",
            "title": "Learn And Grow' During Mental Health Month",
            "smd": {
                "rsi": null,
                "gen": 0,
                "rsc": "",
                "dr": "",
                "sta": "AT-ra-56df8902d0735ca1/-/-/58043433d818d092/1"
            },
            "service": "twitter",
            "element": null
        },
        "type": "addthis.menu.share",
        "triggerType": "addthis.menu.share",
        "target": {},
        "triggerTarget": {}
    }
}

todo

• Is there a better way to know when the AddThis object is ready?
• Is there a practical way to know whether AddThis is in use on a page?

addthis.gtm-tag.html

<script>
    // Source: <https://gist.github.com/robkb/cd471fd9b60aa9f40e480c85687bd340>
    (function () {
        var warn = function () {
        };
        var debug = function () {
        };

        // most linters don't like the raw curly braces, so we cover 'em up...
        var debugMode = '{{Debug Mode}}' === 'true';

        if (debugMode && console && console.info && console.debug) {
            warn = console.warn.bind(console);
            debug = console.debug.bind(console);
        }

        var postIdRE = /(?:\?|&)id=(\d+)/i;
        function extractBlogPostID(url) {
            try {
                return '' + postIdRE.exec(url)[1] || '<id extraction failed>';
            } catch(e) {
                return '<id extraction failed>';
            }
        }

        function pushShare(evt) {
            debug('[AddThis-GTM-GA] Pushing "share" event.');
            dataLayer.push({
                'event': 'GAEvent',
                'eventCategory': 'Blog',
                'eventAction': 'Share - ' + evt.data.service,
                'eventLabel': '#' + extractBlogPostID(evt.data.url) + ' - ' + evt.data.title,
                'eventValue': undefined,
                'eventNonInteractionHit': true
            });
        }

        // not using these yet...
        function pushReady() {
            debug('[AddThis-GTM-GA] Pushing "ready" event.');
            /*
            dataLayer.push({
                'event': 'GAEvent',
                'eventCategory': undefined,
                'eventAction': undefined,
                'eventLabel': undefined,
                'eventValue': undefined,
                'eventNonInteractionHit': undefined
            });
            */
        }

        function pushMenuOpen() {
            debug('[AddThis-GTM-GA] Pushing "menu open" event.');
            /*
            dataLayer.push({
                'event': 'GAEvent',
                'eventCategory': undefined,
                'eventAction': undefined,
                'eventLabel': undefined,
                'eventValue': undefined,
                'eventNonInteractionHit': undefined
            });
            */
        }

        function pushMenuClose() {
            debug('[AddThis-GTM-GA] Pushing "menu close" event.');
            /*
            dataLayer.push({
                'event': 'GAEvent',
                'eventCategory': undefined,
                'eventAction': undefined,
                'eventLabel': undefined,
                'eventValue': undefined,
                'eventNonInteractionHit': undefined
            });
            */
        }

        function pushUserClickback() {
            debug('[AddThis-GTM-GA] Pushing "user clickback" event.');
            /*
            dataLayer.push({
                'event': 'GAEvent',
                'eventCategory': undefined,
                'eventAction': undefined,
                'eventLabel': undefined,
                'eventValue': undefined,
                'eventNonInteractionHit': undefined
            });
            */
        }

        function registerHandlers() {
            debug('[AddThis-GTM-GA] AddThis loaded; registering handlers.');

            addthis.addEventListener('addthis.menu.share', pushShare);
            addthis.addEventListener('addthis.ready', pushReady);
            addthis.addEventListener('addthis.menu.open', pushMenuOpen);
            addthis.addEventListener('addthis.menu.close', pushMenuClose);
            addthis.addEventListener('addthis.user.clickback', pushUserClickback);
        }

        if (typeof addthis !== 'undefined') {
            debug('[AddThis-GTM-GA] AddThis is already loaded');
            registerHandlers();
            return;
        }

        var checkLimit = 100; // * 100ms = ~10 seconds

        // Since AddThis provides no sane way to know when it's loaded, we must do this...
        var areWeThereYet = setInterval(function checkAgain() {
            debug('[AddThis-GTM-GA] are we there yet?');
            checkLimit--;
            if (checkLimit < 0) {
                clearInterval(areWeThereYet);
                warn('[AddThis-GTM-GA] AddThis didn\'t load soon enough; aborting.');
                return;
            }
            if (typeof addthis !== 'undefined') {
                clearInterval(areWeThereYet);
                registerHandlers();
            }
        }, 100);
    })();
</script>