Skip to content

Instantly share code, notes, and snippets.

@robkb
Last active November 2, 2016 04:55
Show Gist options
  • Save robkb/cd471fd9b60aa9f40e480c85687bd340 to your computer and use it in GitHub Desktop.
Save robkb/cd471fd9b60aa9f40e480c85687bd340 to your computer and use it in GitHub Desktop.
AddThis tracking with GTM

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:

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?
<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': 'addthisEvent',
'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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment