Tracking the content shared by users through AddThis with Google Tag Manager

Today we’re going to learn how to track our AddThis Widget , to know what content of our site is being shared by our users. To do it, we’re going to use the eventListeners available from AddThis API and a Social tracking Tag.

We’re going to use the same post format we used for our Tracking Disqus activity with Google Tag Manager post.

Tracking Flow

  1. Check if  addthis has been loaded into the current page.
  2. Wait till page’s DOM has been fully loaded ( gtm.dom )
  3. Fire the AddThis Tracking Tag.

Tags, Rules and Macros

Addthis has a very useful API that will allow us to monitor and configure most of the options from the widget, one of them, is that it has Event Listeners for some of the users actions ( share, open, close ) that users can perform on the widget. We are going to use “share” event from Addthis to be able to launch a Social Tag based on the info proviced by the event. As we usually do, we are going to push the info into the dataLayer, so we can use that data afterwards to populate and fire your tracking tag.

 

Tracking Tag

We need to add a new Custom HTML tag, that will take care of setting up the AddThis listeners for when users shares something. ( The needed code is at the end on the post ).

addthis_tag

 

Rule

We’re going to need two rules , one to fire our Addthis Tracking Tag, and it will have 2 conditions:

  1. Current page DOM must be loaded (gtm.dom)
  2. Current page must have the addthis global variable available. ( We’re using a Macro to gather this info. This Macro is defined in the next post section )

addthis_rule

And another one that will be used to fire the our Social Tracking Hit:

social_rule

Macros

Lastly we’re going to configure all the macros needed for our tracking.

We’ll need one JavaScript Variable Macro, this Macro will return the value of addthis variable ( window.addthis ) , if for any reason it isn’t available it will means that addthis has not been loaded on that current page therefore we will not fire our tracking tag.  It will return “undefined” as value if it is not available ( why whould we want to fire a tag that is not going to do anything ) .

addthis_macro

Secondly we will setup the needed  macros to read the values we pushed to the dataLayer when the user shared something . The following screenshot shows  the way the Macros have to be configured, the type for all of those one are “Data Layer Variable”:

social_tag_macros

 

Social Tracking Tag

We’re almost done, we have a new tag that is taking the care of adding the event listener and pushing the info into the dataLayer, we have one Macro that will tell Google Tag Manager if Addthis is available on the page, 3 Macros that will read the the values for our Social Tracking  and finally we have a rule that will fire our tracking tag just when we need it.

So we’re just missing 1 tag, that is gonna fire a Social Interaction hit to  Google Analytics.   (*Note: We are using a Social Tracking Hit in thous example, but could use and Event, or a virtual page view, you will have all the info pushed to the dataLayer, so just set the Macros and tags at your convenience).

gaSocialTag

 

 

Source Code:

<script>
  function addThisEventHandler(evt) {
    switch (evt.type) {
        case "addthis.menu.share":
            // console.log(["_trackEvent", "Social Share", evt.data.service, evt.data.url]);
            dataLayer.push({
                'event': 'gaSocial',
                'gaSocialNetwork': evt.data.service,
                'gaSocialAction': 'Share',
                'gaSocialTarget': evt.data.url
            });
            break;
    }
}
// Let's set the events listener for addthis API 
addthis.addEventListener('addthis.menu.share', addThisEventHandler);
</script>

 

 

David Vallejo

Google Analytics Consultant and implementer. I have some experience with Google Tag Manager
Follow me: @thyng

Author: David Vallejo

Google Analytics Consultant and implementer. I have some experience with Google Tag Manager Follow me: @thyng

32 thoughts on “Tracking the content shared by users through AddThis with Google Tag Manager”

  1. Hi David,

    I have tried to set up AddThis tracking following your instructions but without success.

    You have skipped few steps (or at least haven explained them well):

    1. Macro: {{isAddThisAvailable}}. How to set up this JavaScript Variable Macro?
    2. Firing rules: GA Social. Where did you get this from?
    3. Social Tracking Parameters are giving me error because they are not defined, according to Google.

    Can you include more printscreens?

    Thanks!

    1. I’m gonna review the full code snippets ( they’re copypasted from my testing container ) , but it seems the highligthing plugin is not working as it should.

      Will ping you here, when the post is updated 🙂

      1. Hi David. I answered Marin’s question re the “isAddThisAvailable” Macro (I hope!). My custom HTML is pushing to the data layer NP. The piece we are missing are the 3 macros that speak to pulling {{gaSocialNetwork}}, {{gaSocialAction}} } into the Social Tracking tag.

        1. I got impatient…. Okay here goes. David, you have a minor error in your explanation above (I think). The 3rd macro should point to “gaSocialTarget” not “gaSocialShare”

          http://note.io/VT23b1

          Marin said:”Social Tracking Parameters are giving me error because they are not defined, according to Google” That’s because 3 Data Layer Variable Macros need to be created. http://note.io/VT2YIG

          So… my custom HTML is getting pushed to the data layer — YAY! And my AddThis shares are getting tracked in GA!

          As an aside some people may wish to change the Social Tracking Tag to an Event Tracking Tag.

          1. I’m in Europe! 🙂 , Post Update published. I assumed some steps for the post, and I shouldn’t :/.

            Now the post is showing all the tags, macros, rules needed to run it. Of course with a bit of works it can be adapted to get it working with your own Macro Names, DataLayer Push, and the way of sending the info ( ie: using an Event or a Virtual Pageview )

            Let me know if it’s clearer now or if you’re missing something

          2. I wish I was in Europe! Stuck in Canada. One (minor) thing. Change “gaSocialShare” to “gaSocialTarget” in the Social Tracking Tag >> Action Target

          3. Hi guys,

            First of all, sorry for late respond and delay in comment.

            Thumbs up for post, it is much more easier to understand. I have one more question, however.

            I have set all by your post, step by step. I’ve tested it with Tag Manager Debug tool. All tags are firing correctly (on pageload) and information about click is correct (which social network is clicked and what is url). Here is printscreen also. However, that information is not send to Google Analytics (I don’t see any data in Real Time).

            Since I have other tags that fire on page, I have tried removing them one by one to see if that can help, but no luck.

            Any idea why? Or how to get that info in GA?

  2. Hi David,

    Thank you so mutch for this one works great! Have a solution for yt videos that works out uf the box if you and some other stuff that im currently are trying out if u are interested:-)

  3. Hi, thanks for this post. I have implemented these instructions from start to finish and the only button that works correctly is the Google+ button, which I understand by default, Google Analytics provides integrated reporting for the +1 Button. Can you explain how you have the addthis button added to the page? The addthis instructions say that you should optin with ga_social by adding the following code to the addthis button code:

    var addthis_config = {
    data_ga_property: ‘UA-xxxxxx-x’,
    data_ga_social: true
    };

    I’ve done that (changing the UA #, of course) and it still doesn’t work.

  4. Great script.

    Can I suggest some improvements to the names used…

    dataLayer.push({
    ‘event’: ‘social’,
    ‘network’: evt.data.service,
    ‘socialAction’: ‘Share’, // Please change to… like | tweet | +1
    ‘opt_target’: evt.data.url
    //, ‘opt_pagePath’: opt_pagePath, // optional
    //, ‘eventValue’: 0,
    //, ‘socialButtonPosition’: ‘top’ // top or middle of page
    });

    Thanks

    Phil.

    1. Hi Phil, personally I think that your naming is too generic (‘network’ as key, and ‘social’ as a value for event) . In any case the naming convection is too personal so I don’t think this is gonna improve anything on the tracking itself. Everyone should use whatever they feel confortable too, but the less generic names you use, the less problem you will need to address in a future 🙂

  5. Hi David,

    Thanks for the great post! I’ve set everything up and confirmed the tag is firing in debug, but the events are not tracking in google analytics real time. Any suggestions?

      1. Great article. How would you do this with the latest version of GTM? Is this Dom Ready? Would be great if you could update it

Leave a Reply

Your email address will not be published. Required fields are marked *