Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

In my previous blog post, How to Track Social Interactions with Google Tag Manager, I explained various nuances of how to monitor the default social sharing buttons created by Facebook, Twitter, Pinterest, and Linkedin. However, those tracking methods do not support 3rd party social sharing solutions, like Sumo or AddThis. But that does not mean it’s impossible. In this blog post, I’ll demonstrate how to track AddThis social shares with Google Tag Manager.

 

What is AddThis?

AddThis is a content sharing platform. They provide tools that make it easier to share content across the social web. In addition to that, they also offer Related Posts widgets, List Building solutions, etc. Today’s blog post is focused on social sharing only.

In order to have it installed on your website, place AddThis Javascript code snippet to all pages. Just keep in mind that some features will not work when implemented via GTM.

AddThis Social Sharing

 

Google TAg Manager Recipe

For your convenience, I have created a ready-mage Google Tag Manager container template (a.k.a. GTM Recipe). Just download it, import to your Google Tag Manager container and start tracking social shares in no time.

If you wish to better understand what’s happening under the hood, continue reading and learn how to track AddThis social interactions.

 

Custom Auto-Event Listener

First, we’ll need to create a Custom HTML Tag with the following code:

It’s a Custom Auto-Event Listener which was built using AddThis JavaScript API. When launched, it listens to all shares that are completed via AddThis social sharing widget. When the interaction is spotted, it fires a Data Layer event called socialInteraction containing the following data:

  • Social Network (AddThis supports many of them).
  • Social Action (Its value will always be Share).
  • Social Target (the URL that was shared)

Set this HTML tag to fire on DOM Ready trigger.

AddThis Custom HTML tag in Google Tag Manager

If you’ve never used DOM Ready Trigger before, here’s what it looks like:

DOM ready trigger

 

Test #1

After you’ve created the Custom HTML tag, save it and enable the Preview and Debug mode. An orange notification bar should appear in your account.

Preview and Debug mode

Once the preview mode is enabled, navigate to the site where the container is implemented and you will see a debug console window at the bottom of your browser showing detailed information about your tags, including their firing status and what data is being processed.

First, click DOM Ready event in the console and make sure that the listener tag fired exactly with this event.

DOM Ready Event in Preview and Debug console

Now, click any button of AddThis social sharing widget (on your website) and take a closer look at Preview and Debug Console’s event stream. Did the socialInteraction event appear? Click it and switch to the Data Layer tab. This is the exact data which was pushed to the Data Layer by AddThis Custom Auto-event listener (we can push it further to Google Analytics):

Social Interaction Data Layer Event

Important: AddThis listener only captures intentions to share, not actually completed ones. That is all we can get from AddThis JavaScript API. The same rule applies to the default Twitter, Linkedin, and Pinterest buttons.

 

Trigger And Variables

Step 1 of 3 is complete. Let’s move to the second stage of the implementation how to track Addthis clicks.

By default, Google Tag Manager does not recognize the custom data and events which were added by custom Auto-Event Listeners, so you need to do some extra work in order to “teach” GTM.

First, create a custom trigger:

Custom - Social Interaction Trigger

It will be dispatched every time the socialInteraction Data Layer event occurs.

Next step: variables. Let’s go back for a second to the AddThis custom Auto-Event Listener. After a website visitor clicks the Share button, the listener dispatches a Data Layer event with the following data:

What we need to do is create three Data Layer Variables:

  • socialNetwork
  • socialAction
  • socialTarget

Otherwise, you won’t be able to utilize them in Google Tag Manager account.

Social Interaction Data Layer Attributes

 

TEST #2

Repeat the same action as you did in the Test #1:

  • Enable/Refresh Preview and Debug mode.
  • Navigate to the website where your GTM container is implemented.
  • Click any button in AddThis Social Sharing widget. socialInteraction event will appear in the Preview and Debug Console.

Click socialInteraction event and switch to the Variables tab.

Social Interaction Data Layer Attributes as Variables

You’ll see all 3 newly created variables and their values. If any of the variables equals to undefined , you probably did a mistake in variable settings. Variable name is a case sensitive field, so make sure you entered socialNetwork, instead of socialnetwork.

 

Google Analytics Tag

Final step: create Google Analytics tag. It should fire only when the following sequence is complete:

  1. DOM Ready event occurs.
  2. Custom HTML AddThis Listener tag fires.
  3. Visitor clicks any button in AddThis Social Sharing Widget.
  4. Custom Auto-Event Listener spots the click and creates a socialInteraction dataLayer event (which is used as a trigger)
  5. Trigger dispatches and launches Google Analytics tag.

All steps are required and must be completed in this exact order.

Go to Tags in GTM and hit New button. Choose Universal Analytics Tag type and add the following settings:

Google Analytics Social Interaction

As you can see, all three variables are used as Network, Action and Action Target values in Google Analytics Social tag. Since I used Social track type, all AddThis widget interactions will appear not in Events reports, but rather in Acquisition > Social > Plugins.

Feel free to change track type to Event, if you wish. In that case, you’ll be able to see events in GA Real-time reports.

If you’re wondering why I entered {{Constant – GA UA}} in Tracking ID field, read this post by Google about user-defined constant variables and why you should always use them. Also, consider using Google Analytics Settings Variable.

 

TEST #3

If you chose Social as Google Analytics Track Type, the data will appear within 24-48 hours in Google Analytics Social Plugins report (Acquisition > Social > Plugins). They won’t be visible in the GA Real-time reports.

If you chose Event as a Google Analytics Track Type, then check Google Analytics Real-time reports to see whether AddThis clicks are passed to the GA correctly.

Congratulations! You have successfully learned how to track AddThis Social Shares with Google Tag Manager. Any questions? Feel free to post them in the comments section below.

 

Conclusion: How To Track AddThis Social Shares

Social interactions that occur on your website clearly indicate a high level of user engagement, so there is no question that we need to track social interactions. In this blog post, I’ve explained how to track AddThis Social Sharing widget clicks with Google Tag Manager and send that data to Google Analytics.

To do this properly you need to:

  • Create a Custom HTML tag which listens to all clicks AddThis widget.
  • Fetch data from the Data Layer whenever user/visitor shows an intention to share the content.
  • Pass that data to Google Analytics (as Social Event).

For those who value their time, I’ve created and shared a ready-made Google Tag Manager container template.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Julius Fed

Product manager at Soundest. I am highly interested in Google Tag Manager, Google Analytics, Adwords, Email marketing, Email Deliverability, Digital Marketing in general. You can follow me on Twitter.