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

If you’re already using Twitter as a marketing tool, you want to measure the results, right? But how can you track interactions such as “Tweet” button clicks? What about Twitter conversions? Everything used to work like this – you send an email to the developer with requirements of what should be tracked and it takes him weeks complete the task. But not anymore! I present to you a complete Google Tag Manager Twitter guide.

This blog post assumes you have a working knowledge of Google Tag Manager tags, triggers, variables, and data layer. If you’re a beginner – I recommend checking out these free Google Tag Manager courses.

 

In this blog post I’ll cover three main topics:

  1. How to track Twitter shares with Google Tag Manager.
  2. How to implement Twitter Remarketing (Pixel) with Google Tag Manager
  3. Twitter Conversion Tracking with Google Tag Manager.

 

1. Track Twitter Shares With Google Tag Manager

Track Twitter Button With Google Tag Manager

In this chapter I’ll show you how to track clicks of Twitter buttons on your website (Tweet, Follow) and automatically send this data to Google Analytics as Social Interactions.

 

Before we continue

Here are several things to keep in mind:

  • This tracking method supports only those buttons, which are embedded on your website. It’s impossible to track all tweets, retweets, etc. that happen on other websites. You are able to track only those interactions, that happen within boundaries of your own website which has Google Tag Manager installed.
  • This tracking method supports only default Twitter buttons. AddThis, Sumo, or any other social sharing plugins will not be tracked. In case of custom social buttons, you should either try tracking standard button/link clicks or check if social buttons vendor offers built-in Google Analytics integration.
  • When a user clicks Tweet button on your website, a small window appears (where a person can add some text to his/her tweet). Unfortunately, it’s impossible to track whether a person eventually published his tweet. Remember,we can track the button which is embedded on your site. We cannot track the button in the small window (because it’s beyond your website). So in this case you can say that we’ll track visitors’ intentions to tweet rather than actual tweets.
    Google Tag Manager Twitter Tracking - what will work
  • The tracking method I’ve described in this blog post sends the data to Google Analytics as Social Interactions. You won’t see these events in Google Analytics Real-time reports. They will appear in your Social reports (Acquisition > Social > Plugins) after 24-48 hours. If you wish send data as events, I’ll explain that option too.

Custom HTML Tag – Twitter Listener

In order to track clicks of Twitter buttons, we’ll need to create a custom HTML tag in GTM – Twitter listener. As you can guess from its title, it will listen to Twitter buttons’ interactions that occur on a website. After listener spot a click it will create a dataLayer event.

That dataLayer event is really important – we’ll use it as a trigger to fire Google Analytics tag.

By the way, I have publish a ready-made Twitter Tracking Recipe for GTM. Feel free to download it and import to your Google Tag Manager container in minutes.

Now, I will explain how Twitter tracking works in detail. Let’s create a Twitter Listener tag in GTM.

Twitter listener for GTM

  • Tag type – Custom HTML
  • Tag title – cHTML – Twitter Listener. cHTML stands for Custom HTML (I like to keep all tags in my order).
  • In HTML field paste the following code (it monitors Twitter buttons on a page and fires dataLayer event socialInteraction in case of a click):
  • In Triggering section click the entire block:
    Add trigger to Twitter Listener for GTM
    … and choose Window Loaded trigger. If you don’t have one – create it. A trigger’s configuration should look like this:
    Window Loaded TriggerAssign it to a newly created Twitter Listener’s custom HTML tag.

Why didn’t I choose regular Pageview trigger? I often noticed that listener does not work properly if it’s launched in early stage of page load (when Twitter buttons did not complete loading).

I chose Window Loaded event for a reason. It fires our Twitter listener only when all other scripts on the page (incl. Twitter buttons) are loaded. That way I can be assured that all buttons will be tracked correctly.

However, there’s one but. If you page takes 10 seconds to load all scripts and visitor clicks Tweet button on the 8th second of his/her visit, that interaction will not tracked, because Twitter Listener is not launched yet.

But I chose to live with this drawback, because I don’ expect my visitors to start sharing content like crazy right after he/she landed on a page.

 

Let’s Test Our TWITTER LISTENER

Now, let’s use Google Tag Manager’s Preview and Debug mode to find out whether Twitter listener works for us. At the top-right corner of your GTM account, expand Publish button’s options and click “Preview”.

Google Tag Manager Publish Container

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

This console window will appear only on your computer as you preview the site, and is not visible to your other website visitors. It should look something like this:

preview and debug console

First, check whether Twitter Listener fired on Window Loaded event. On the left side, click Window Loaded. It should look like this:

Twitter Listener fired

Then click Tweet button on that very same page and look for socialInteraction event in Preview and debug console. Like in the screenshot below:

Social Interaction Preview and Debug Mode in GTM

That’s it! Our Twitter listener in Google Tag Manager works perfect! Proceed to the next step.

 

Custom Trigger

Now we should create a GTM trigger which recognizes dataLayer event socialInteraction. It’s crucial for our Google Analytics tag to work.

In Google Tag Manager, go to Triggers and hit New. Create a trigger with the following settings:

Social Interaction Custom Trigger in GTM

 

Three Variables

As you already know, when Twitter button click occurs, Twitter Listener creates dataLayer event. What you might not know, that it also provides additional data:

Social Interaction Event in DataLayer

See socialNetwork, socialAction and socialTarget? We can pass that data to Google Analytics. But first we need to create 3 variables in GTM (otherwise Google Tag Manager won’t recognize these data points).

So go to Variables in GTM and create 3 variables with the following settings (you’ll need them in Google Analytics tag):

Twitter Listener dlv

In case you’re wondering what does dlv mean in title of every variable – it’s Data Layer Variable. I like to keep my tags, triggers and variables in order. It makes work with GTM much easier.

 

Google Analytics Tag

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

  1. Window Loaded event occurs.
  2. Custom HTML Twitter Listener tag fires.
  3. Visitor clicks Tweet button.
  4. Twitter Listener spots the click and creates socialInteraction dataLayer event.
  5. Trigger socialInteraction fires 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 tag. Since I used Social track type, all Twitter buttons’ 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.

 

Final Test

If you chose Social as Google Analytics Track Type, the data will appear within 24-48 hours in Social Plugins report (Acquisition > Social > Plugins).

If you chose Event as Google Analytics Track Type, then use Google Analytics Real-time reports to see whether Twitter button clicks are passed correctly to GA.

 

Did You Know?

I have also prepared read-made Google Tag Manager templates which allow you to track Facebook Likes, Pinterest Pins and Linked In shares on your website. Give them a try as well!

 

 

2. Twitter Remarketing with Google Tag Manager

Twitter Remarketing Googe Tag Manager

The 2nd chapter of this Google Tag Manager Twitter guide is dedicated to remarketing. Since 2016 September, it’s become much easier to track Twitter conversions with Google Tag Manager due to ready-mage Twitter Universal Website Tag template.

Moreover, with the tag’s event parameters you can manage advanced conversion tracking with just a few clicks (more about conversions – in the next chapter).

In case you’re not familiar with Twitter remarketing, it works similar like Google Adwords Remarketing or Facebook Pixel, where a visitor lands on your website and gets a unique cookie (stored in his/her browser). That cookie enables Twitter to automatically recognize that person and retarget him/her with ads.

Google Tag Manager makes it easy for you to add a Twitter Universal Website tag in order to start growing a custom audience.

 

Get Twitter Pixel ID

First, you’ll need to login to your Twitter account, click your profile thumbnail and then navigate to Twitter Ads.

Twitter ads in profile

When you reach your Twitter Ads, click Tools and select Conversion Tracking. If you haven’t set any conversions before, you should see the following message:

Twitter conversion tag is not installed

Twitter universal website tag status will become verified when you add a tag to a website and Twitter will receive at least small portion of data from your site. You’ll be asked to add a Universal Website tag to every page of your website (right before the closing </body> tag). A sample code will look like this:

twitter universal website tag

Since Google Tag Manager provides a ready-made Twitter tag, all you need is Twitter Pixel ID. You can find it here:

Twitter pixel ID

Copy it. This ID is required in every Twitter Tag in GTM – just like every Google Analytics tag requires GA Tracking ID (UA-XXXXXX-XX). Let’s create a constant variable for Twitter Pixel ID (because we’ll use it at least several times).

In Google Tag Manager, go to Variables and create new user-defined variable:

  • Title – Constant – Twitter Pixel ID.
  • Type – Constant.
  • Value – Paste Twitter Pixel ID, e.g. aa1x2.

Now open your Google Tag Manager account and create a new tag:

  • Tag type – Twitter Universal Website Tag.
  • Paste Twitter pixel ID.
  • Select Tag Event – Pageview.
  • In Triggering section choose – All pages.

Twitter pageview tag in Google Tag Manager

Hit save and test it. The best way to check the tag is to use Chrome extension – Twitter Pixel Helper. You can read more about it in official Twitter knowledge baseP.S. It might take up to 24 hours for the tag status to change to verified in Twitter Ads account.

Done! You have installed Twitter’s remarketing tag. From now on, all visitors of your website will receive a 3rd party cookie from Twitter, thus your remarketing audience (a.k.a. Tailored audience) will grow. When those visitors with cookies browse Twitter, they’ll see your ads.

Actually, you can take Twitter marketing even further by implementing conversion tracking. Learn more about it in the next chapter.

 

3. Twitter Conversion Tracking with Google Tag Manager

Twitter Conversion Tracking Googe Tag Manager

The 3rd and final chapter of the Google Tag Manager Twitter guide will cover conversion tracking. If you’re familiar with Adwords tracking setup process via Google Tag Manager, is particularly the same. All you need to do is to:

  1. Create a tag in Twitter Ads account (Done! – It’s described in the previous chapter).
  2. Find and copy your pixel id (Done! – I have described it in the previous chapter).
  3. Paste it in appropriate field of the tag (Done! – It’s described in the previous chapter).
  4. Make the tag (or tags) fire after certain interactions you want to track as conversions.

 

Twitter conversion tracking works like previously described remarketing technique. You’ll be using the same Twitter Tag Template in Google Tag Manager, but events will be different. In the previous chapter I have created a Twitter Pageview tag, in this chapter we’ll track more precise interactions, like signups or purchases.

For every interaction you want to track with Twitter, you’ll need to create a separate GTM Twitter tag. It will use the same Tracking ID pixel from your Universal Website tag but different tag events:

Twitter Tag Events

Also, triggers in Google Tag Manager will be different for each event. Now I will give you short examples of how you can utilize each event type.

 

Twitter Event – View content

If you’re tracking visitors on a blog, then ViewContent Twitter tag should fire when visitor navigates to a blog post page. If you’re the owner of e-commerce business, then your content is a product page. Sample tag could look like this:

Twitter Tag - Viewed Content

Let me explain:

  • I added additional parameter – content_name. This data is not available in GTM by default, so you’ll need to create a user-defined a Javascript variable – Page Title (Variable type: Javascript variable, Global variable name: document.title). Adding additional parameters is optional! You can skip them, if you wish.
  • Trigger’s (that I used for this Twitter tag) settings are:
    • Title – Pageview – Viewed Blog Post.
    • Type – Pageview.
    • This trigger fires on – Some Page Views
    • Rule – Page Path starts with /post/, because all posts in my blog contain “/post/” in URL., e.g. https://www.analyticsmania.com/post/konami-code-with-google-tag-manager/.

 

TWITTER EVENT – Search

When a visitor uses search on my blog, page’s URL changes to analyticsmania.com/?s=search_query. So for Twitter Search Tag I’ll use trigger with the following settings:

  • Title – Pageview – Used Search.
  • Type – Pageview.
  • This trigger fires on – Some Page Views
  • Rule – Page Path starts with /?s=

 

TWITTER EVENT – Add To Cart

If you own an online store, then this event is pretty important in order to measure sales funnel. Every e-commerce platform is really different, so it’s impossible to describe a standard method how to track Added to cart  event.

The most robust solution would be to ask developer to send this interaction as a dataLayer event. Then you could catch that event with Google Tag Manager and use it as a trigger which launches AddToCart Twitter tag.

Read this blog post to find out how you can use Data Layer Events as Triggers.

 

TWITTER EVENT – ADD TO WishList

The issue is pretty similar to Add To Cart events – it’s impossible to write a solution that fits all online stores. The most robust solution is to ask developer to send this interaction as a dataLayer event. Of course, it’s possible that some online stores redirect users to a particular page when an item is added to a wishlist.

Then you could use Pageview trigger with certain Page Path pattern. But in this case you have another problem – bad user experience. Redirecting user to a certain page after each Added to wishlist event may result in poor sales due to annoying  behavior flow.

 

TWITTER EVENT – Initiate Checkout

If your checkout process consists of more than one step, then usually step 1 has some unique string in the URL, e.g. sampleshop.com/checkout/step1/some_other_stuff. In that case you can use Pageview Trigger with the following rules (remember – it’s only an example. In your case Page Path might be different):

  • Title – Pageview – Initiated Checkout.
  • Type – Pageview.
  • This trigger fires on – Some Page Views.
  • Rule – Page Pats contains /checkout/step1/

 

TWITTER EVENT – Added Payment Info

There are two most common scenarios how we can identify that visitor entered payment information:

  • Either he/she visited a particular page with unique URL. Then, you should use Pageview trigger (like I have described InitiateCheckout tag).
  • Or the URL does not change when payment info is entered. In that case – ask developer to send dataLayer event, hwne payment information was successfully saved. Actually, I’d ask to add to events: 1. User started entering payment information. 2. User successfully enter information. This way I could see how many people bounced off my checkout process in this step.

The same principle (Pageview or Data Layer event) can be also applied to the following Twitter events:

  • Purchase.
  • Signup.
  • Download.
  • CompleteRegistration.

Very useful information:  I highly recommend reading this guide of 5 form tracking methods with Google Tag Manager. It will be especially useful if you’re want to track Signup or CompleteRegistration Twitter events. Chances are you won’t need developer’s input when it comes to track form submissions.

 

When you set up all Twitter tags, do not forget to test them:

  • Utilize GTM’s Preview and Debug mode to see if tags fire when they suppose to.
  • Also use Chrome plugin – Twitter Pixel Helper.

 

Twitter Conversion Tracking: Things To Keep In Mind

  • It may take up to 24 hours for data to appear in Twitter Ads account (but usually it’s processed much faster).
  • Before you enter tagging “rampage mode”, prepare a measurement plan – a list of what you really need to track. It will bring more transparency, help you plan ahead and avoid inconsistency problems.
  • Test, test, test before publishing – devil is in the detail. One tiny mistake can lead to huge problems.

I will not go into details how to setup the actual ad campaign in Twitter. You can watch this video instead.

Other useful resources:

 

Google TAg Manager Twitter Guide – Conclusion

You can do a lot of awesome stuff with Twitter and Google Tag Manager. No doubt about it!

In this Google Tag Manager Twitter guide I have explained how you can take your Twitter marketing to the next level:

  • Track click of Twitter’s Tweet button and send these events to Google Analytics. This way you’ll see your best performing content.
  • How to create Twitter Remarketing audience (a.k.a. Tailored Audience) with Google Tag Manager.
  • How to track various events/conversions with Twitter Universal Website tag in Google Tag Manager. You can later show adds based on visitors’ actions on your website – just like in Google Adwords or Facebook Ads.

Did I miss something in this blog post? If yes, let me know in the comments!

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

Head of Developer Operations at Omnisend. 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.