Friday, March 29, 2024
No menu items!
HomeData Analytics and VisualizationComplete Guide: Google Tag Manager + Twitter

Complete Guide: Google Tag Manager + Twitter

Updated: August 11th, 2021

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 to 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 starting here. Want to be up-and-running much faster? Take a look at my GTM masterclass for beginners.


Table of Contents

+ Show table of contents +

Twitter Pixel with Google Tag Manager
Get Pixel ID
Create a tag and a variable
Test the tag
Don’t forget consent
Things to keep in mind

Twitter Conversion Tracking with Google Tag Manager
Purchase tracking with Twitter Pixel and Google Tag Manager
Test the setup
Things To Keep In Mind

Where can you find the sales/conversions data in the Twitter Ads interface?
Track Twitter Shares With Google Tag Manager
Before we continue
Custom HTML Tag – Twitter Listener
Let’s Test the Twitter Listener
Custom Event Trigger
Data Layer Variable
Google Analytics 4 Tag
Final Test
Things to keep in mind

Final Words

 

1. Twitter Pixel with Google Tag Manager

The first chapter of this Google Tag Manager Twitter guide is dedicated to remarketing. Even though 3rd party cookies will eventually die (because of the changing landscape in the ad tech industry), you can still use them to some extent at the moment.

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 similarly to Google Ads 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 (a.k.a. Twitter Pixel) in order to start growing a custom audience.

 

Get Pixel ID

First, you’ll need to log in to your Twitter account, and on the left side click More > Twitter Ads.

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:

As you can see in the screenshot above, the status of the Universal website tag is unverified. That will change once you implement the pixel, send some data, and wait for ~24 hours.

Click the View code and installation instructions under that tag status and you will get the pixel code. A sample code of Twitter Tracking Pixel will look like this:

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

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) or measurement ID (G-XXXXXXXXX). Let’s create a constant variable for Twitter Pixel ID (because we’ll use it at least several times).

 

Create a tag and a variable

In Google Tag Manager, go to Variables and create a 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 (you will need to use the search feature in the tag template list)
Paste Twitter pixel ID.
Select Tag Event – Pageview.
In the Triggering section choose – All pages.

Hit save.

 

Test the tag

In the top right corner of the GTM interface, click Preview.

A popup there will ask you to enter the URL which you want to test and debug. It might be the address of a homepage or it might be a specific page’s URL and then press Start.

A new browser tab (or window) should appear where you will see the URL that you entered in the previous popup. At the bottom of that page/tab, you must see the following badge:

And if you go back to the tagassistant.google.com tab, you must see this success message. Click Continue.

If you don’t see the success message or if the preview badge shows that the debugger is not connected, read this.

On the left side of the preview mode click on Container Loaded. This is an event that is equivalent to the All Pages or Pageview trigger.  Once you do that, you should see that your Twitter Pixel tag has successfully fired.

Additionally, use the Twitter Pixel Helper Chrome extension. Install it. Refresh the page of your website where the preview mode is enabled and Twitter Pixel is activated.

Click the Twitter Pixel Helper icon in your Chrome browser. You should see something like this:

There will be a number next to the Twitter Pixel Helper icon. And also you will see that your website tag fired successfully.

Done! You have installed the Twitter Pixel 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.

 

Don’t forget consent

I used the All pages trigger in this blog post for sake of simplicity. In reality, the setup is much more complex because you should fire tags like this one only if a visitor gives consent for tracking. To do that, you will need to:

Have a cookie consent popup on your website
Then configure GTM to listen to user interactions with that popup
And then fire tags only if a visitor gives consent

This topic is not an easy one. You can get more familiar with it here. Also, I dive deep into it in my Google Tag Manager Masterclass for Beginners.

 

Things to keep in mind

It may take up to 24 hours for data to appear in a Twitter Ads account (but usually it’s processed much faster).
Test, test, test before publishing – the devil is in the detail. One tiny mistake can lead to huge problems.

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

Alright, so what’s next? It’s time to track Twitter Pixel conversions with Google Tag Manager.

 

2. Twitter Conversion Tracking with Google Tag Manager

The 2nd chapter of the Google Tag Manager Twitter guide will cover conversion tracking. If you’re familiar with Google Ads tracking setup process via Google Tag Manager, is pretty much the same. All you need to do is to:

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

Twitter conversion tracking works like the 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:

Also, triggers in Google Tag Manager will be different for each event. Want to learn various event tracking techniques? Take a look at my Google Tag Manager courses.

 

Purchase tracking with Twitter Pixel and Google Tag Manager

I believe that the most important interaction that most of my readers will try to track is the purchase. So let’s take a closer look at how can we implement this.

The most robust option to track purchases is to ask a developer to push the purchase data to the Data Layer. Once the developer implements this, enable the GTM preview mode and make a test purchase. On the left side of the preview mode, you should see a purchase. Click it and then expand the API call. An example of that data could look something like this:

By the way, if you want to learn more about data layer and purchase tracking, take a look at this course.

Even though there are many data points (related to the purchase) in the data layer, it is completely fine to send at least the revenue and the currency. Since we want to use those two data points and send their values to Twitter Pixel, we have to create two separate Data Layer Variables.

In GTM, go to Variables > New > Data Layer Variable. Create the first variable, which is ecommerce.purchase.currency. Read this to learn more about why I entered the name like this.

Then do the same thing for ecommerce.purchase.value.

Then in GTM, go to Tags > New > Twitter Universal Website Tag and enter the following settings:

I inserted the Twitter Pixel ID constant variable (created in the 1st chapter of this blog post). Also, I have selected the Purchase event. But we are not done yet. We could also send order value and currency together with the Purchase event.

Below the list of possible events, click Add (in the Event Parameters section).

Then you will have to add two parameters (one by one). The order does not matter here so let’s start with the currency. Select it in the first field. In the second field, insert the Data Layer variable (that returns currency) that you have recently created. It will look like this:

Click Add. Then do the same thing for value. Select the value in the first dropdown field and insert the Data Layer variable that returns the order total in the second field. Eventually, the tag configuration will look like this:

In the Twitter Pixel purchase tag, click anywhere on the Triggering section and then click the Plus icon in the top-right corner.

Select the trigger type: Custom Event. If the value of the “event” parameter in the dataLayer.push was “purchase”, enter “purchase” in the trigger’s settings.

Again, I want to emphasize this. I entered “purchase” (all lowercase) because the “event” in the dataLayer.push was “purchase”. Save the trigger and it will be automatically added to the Twitter Pixel tag.

 

Test the setup

Now the time has come to test everything. In the top right corner of the GTM interface, click Preview.

A popup there will ask you to enter the URL which you want to test and debug. It might be the address of a homepage or it might be a specific page’s URL and then press Start.

A new browser tab (or window) should appear where you will see the URL that you entered in the previous popup. At the bottom of that page/tab, you must see the following badge:

And if you go back to the tagassistant.google.com tab, you must see this success message. Click Continue.

If you don’t see the success message or if the preview badge shows that the debugger is not connected, read this.

Make a test purchase on your website. A purchase event should appear on the Preview mode’s left side. Click it and you should see that your Twitter Purchase tag has fired.

Additionally, use the Twitter Pixel Helper Chrome extension. Refresh the page of your website where the preview mode is enabled and Twitter Pixel is activated. Click the Twitter Pixel Helper icon in your Chrome browser. You should see something like this:

Click the “Twitter website tag fired successfully” and then click Advanced Debug Info and you will see more details about the request that was sent to Twitter Pixel.

Great! Now it’s time to publish your changes in GTM. Click SUBMIT in the top right corner, select PUBLISH and CREATE VERSION, and then complete the flow that you will see there.

 

Things To Keep In Mind

It may take up to 24 hours for data to appear in the 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 – the devil is in the detail. One tiny mistake can lead to huge problems.

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

 

3. Where can you find the sales/conversions data in the Twitter Ads interface?

You can find them by going to Campaigns > Ads Manager. Then in the list of all campaigns, switch metrics to Website Conversions. This is the place where you will find purchase data.

If you want to see other conversions, then switch back to Summary.

And click Customize metrics.

Then keep looking for Key Conversions. They are the ones that you select as your main conversions in ad campaigns.

 

4. Track Twitter Shares With Google Tag Manager

Embedding social network buttons on your website becomes less popular every day. However, if you still have a “Tweet” button on a site and you want to track its clicks, this chapter is what you need.

 

Before we continue

Here are several things to keep in mind:

This tracking method supports only those buttons that are embedded on your website. It’s impossible to track tweets, retweets, etc. that happen on other websites (including twitter.com). You are able to track only those interactions, that happen within the 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 the case of custom social buttons, you should either try tracking standard button/link clicks or check if the social buttons vendor offers built-in Google Analytics integration.
When a user clicks the 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.

 

 

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 the listener spots a click it will create a dataLayer event. That dataLayer event is really important – we’ll use it as a trigger to fire the Google Analytics tag.

Now, I will explain how Twitter button tracking works in detail. Let’s create a Twitter Listener tag in 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 the HTML field paste the following code (it monitors Twitter buttons on a page and fires dataLayer event socialInteraction in case of a click):
<script>
if (typeof twttr !== ‘undefined’) {
twttr.ready(function (twttr) {
twttr.events.bind(‘tweet’, tweetIntentToAnalytics);
twttr.events.bind(‘retweet’, retweetIntentToAnalytics);
twttr.events.bind(‘favorite’, favIntentToAnalytics);
twttr.events.bind(‘follow’, followIntentToAnalytics);
});
}
function clickEventToAnalytics() {
dataLayer.push({
‘event’: ‘socialInteraction’,
‘socialNetwork’: ‘Twitter’,
‘socialAction’: ‘click’,
‘socialTarget’: window.location.href
});
}
function tweetIntentToAnalytics() {
dataLayer.push({
‘event’: ‘socialInteraction’,
‘socialNetwork’: ‘Twitter’,
‘socialAction’: ‘tweet’,
‘socialTarget’: window.location.href
});
}
function retweetIntentToAnalytics() {
dataLayer.push({
‘event’: ‘socialInteraction’,
‘socialNetwork’: ‘Twitter’,
‘socialAction’: ‘retweet’,
‘socialTarget’: window.location.href
});
}
function favIntentToAnalytics() {
dataLayer.push({
‘event’: ‘socialInteraction’,
‘socialNetwork’: ‘Twitter’,
‘socialAction’: ‘favorite’,
‘socialTarget’: window.location.href
});
}
function followIntentToAnalytics() {
dataLayer.push({
‘event’: ‘socialInteraction’,
‘socialNetwork’: ‘Twitter’,
‘socialAction’: ‘follow’,
‘socialTarget’: window.location.href
});
}
</script>

In the Triggering section click the entire block:

… and choose Window Loaded trigger. If you don’t have one – create it. A trigger’s configuration should look like this:
Assign it to a newly created Twitter Listener’s custom HTML tag.

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

I chose the 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 your page takes 10 seconds to load all scripts and the visitor clicks the Tweet button on the 8th second of his/her visit, that interaction will not be tracked, because Twitter Listener is not launched yet. But I chose to live with this drawback because I don’ expect visitors to start sharing content like crazy right after they land on a page.

 

Let’s Test the Twitter Listener

Now, let’s use Google Tag Manager’s Preview and Debug mode to find out whether Twitter listener works for us.

In the top right corner of the GTM interface, click Preview.

A popup will ask you to enter the URL which you want to test and debug. It might be the address of a homepage or it might be a specific page’s URL and then press Start.

A new browser tab (or window) should appear where you will see the URL that you entered in the previous popup. At the bottom of that page/tab, you must see the following badge:

And if you go back to the tagassistant.google.com tab, you must see this success message. Click Continue.

If you don’t see the success message or if the preview badge shows that the debugger is not connected, read this.

Then click Window Loaded on the left side of the preview mode and check if your listener has fired. It is supposed to fire on every page.

 

Then click the embedded Tweet button on your website. A socialInteraction event will appear in the preview mode. If it did not, then either you have misconfigured something or that button is not supported by this solution.

Anyway, that socialInteraction event should look like this:

 

Custom Event Trigger

Now we should create a GTM trigger that 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:

 

Data Layer Variable

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

See socialNetwork? We can pass that data to Google Analytics 4. But first, we need to create a variable for that (otherwise, we won’t be able to use it in the tag). Go to Variables in GTM > New > Data Layer Variable and enter the following settings.

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

 

Google Analytics 4 Tag

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

Window Loaded event occurs.
Custom HTML Twitter Listener tag fires.
Visitor clicks Tweet button.
Twitter Listener spots the click and creates socialInteraction dataLayer event.
Trigger socialInteraction fires and launches Google Analytics tag.

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

In GTM, go to Tags > New > Google Analytics: GA4 Event. Enter the following settings:

In the Configuration Tag field, I entered my GA4 config tag. This is the essential part of every GA4 setup. You can learn more about it here.
In the Event Name field, I entered share name because it is mentioned in the list of Recommended events. But that is not set in stone. You can name this event whatever you want.
Then I came up with a social_network parameter because let’s say that I have multiple social network buttons embedded on my sie.

In the triggering section of this tag, I selected the previously created socialInteraction custom event trigger.

 

Final Test

Save the tag and then enable/refresh the preview mode of Google Tag Manager (by clicking the Preview button in the top-right corner of the GTM interface). Then go to your website and click the embedded Twitter Tweet button. Go back to the GTM preview mode.

On the left side of the preview mode, you will see the socialInteraction event. Click it and then you should see that the GA4 event tag has fired.

Let’s test whether this event was properly captured by Google Analytics 4. Go to GA4 > Configure > DebugView. Find your device:

… and then you should see the share event. Click it to see more details.

Looks like everything is working fine. Go back to the GTM interface, click SUBMIT and then PUBLISH.

 

Things to keep in mind

If you want to use the social_network parameter in GA4 reports, you will need to register it as a custom dimension.

Want to learn where can you see the event data in the GA4 interface? Read this.

 

Google Tag Manager Twitter Guide: Final Words

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:

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 implement Twitter pixel to build your remarketing audiences
How to track various events/conversions with Twitter Universal Website tag in Google Tag Manager. You can later show ads 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!

 

 

The post Complete Guide: Google Tag Manager + Twitter appeared first on Analytics Mania.

Read MoreAnalytics Mania

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments