Track Custom Events with Twitter Pixel and Google Tag Manager

In the past, I have already explained how you can track user interactions with Facebook and Twitter Pixels. At first sight, their functionality looks pretty similar: there is a list of supported events (e.g. Pageview, Signup, etc.) which can be tracked on a website. In addition to that, Facebook Pixel supports trackCustom method which makes the entire implementation much more flexible.

Last week, I’ve received a question from a reader asking whether the same functionality of custom events is supported by Twitter pixel as well. Well, uh… yes and no. In this blog post, I’ll explain how to track custom events with Twitter Pixel and why this solution kinda sucks (compared to Facebook).

Before we continue, I’d like to tell it out loud: Twitter Pixel “documentation” is one of the worst documentations I’ve seen online. In his blog post, Yehoshua Coren said that Facebook Pixel’s documentation is pretty confusing and missing some parts.

Well, that’s still better than terrible, very limited, incomplete documentation which sometimes contradicts to itself. There, I said it. I feel a bit better now. Thanks for hearing me out.

Why Facebook Pixel is a better solution

As I have mentioned before, FB Pixel allows not only to fire one of their standard events, but it also enables us to send custom events with custom attributes. Here’s a quick example.

<script>
 fbq('trackCustom', 'watchedVideo', {
  videoTitle: 'Google Tag Manager Tutorial',
  videoLength: '493' //seconds
 });
</script>

And that’s awesome! If I wanted, I could fire a watchedVideo event with properties videoTitle, videoLength, etc. and then build audiences based on them.

In the meantime, Twitter Pixel and its limited functionality are way behind. Universal Website Tag is a solution offered by Twitter which enables you to add one tracking code to all pages and then fire any of 11 available events (pageview, signup, registration complete, add to cart, etc.).

What about custom events? It would be much better for marketers to have the possibility to use the same Universal Tracking Tag’s code and send not only the standard but custom data as well.

Basically, each Twitter’s event is using the following structure:

twq('track','eventName')

Replace eventName with one of the standard events, like Purchase, Pageview, etc. I tried replacing it with some random name, say, customEventName to see if it works. According to Twitter Pixel Helper, that random custom event was sent successfully, unfortunately, there is no way in Twitter Ads interface, where I could find that custom event and build a remarketing audience accordingly.

#sadface

In conclusion, the Twitter Universal Website Tag does not support custom events. Or at least I could not find any information about it. But do not give up yet.

Another solution

I could not believe there was no possible way to send custom event data to Twitter so I dug a bit deeper. Under the Setup section of their documentation, I found this paragraph which raised my right eyebrow.

“For most advertisers, we recommend using the Universal Website Tag as opposed to the Single Event Tag. In rare cases, you may need a Single Event Tag to track a conversion for a non-page loading event (e.g. download a white paper or submit registration form).”

“In rare cases”? Sometimes, I think that Twitter developed their entire Pixel functionality without actually asking what their customers want or need. Having the ability to fire custom events in Facebook Pixel is one of their most awesome features (many marketers I’ve spoken with agree on that). Why can’t Twitter do the same thing?

For some reason, they decided not to incorporate this solution in their Universal Tag and offered another one instead (but much more limited).

Okay, that’s enough of bitching from my side, I believe I’ve exceeded my monthly quota. Let’s head over to the actual solution how to track custom events with Twitter Pixel. After all, that’s the reason you’re here, right?

 

Single event tag

To start tracking custom events with Twitter Pixel, you’ll have to create a conversion with Single Event Website Tag. Every event will require you to create it on Twitter Ads account, first.

Deep inside, I still hope that I’m wrong and there is a better way to do it. I’d highly appreciate if someone could point me in the right direction.

Anyway, in Twitter Ads account, go to Tools > Conversion Tracking > Create New Conversion Event.

Give it a proper title, choose Custom Type of Conversion and then choose Single Event Website Tag under the Event Tracking and Rules section. I also recommend ticking the Create a tailored audience checkbox. If you wish, do some other minor tweaks to settings and save the Conversion Event.

You’ll get a JavaScript code snippet which should be fired on your website when a particular (and important) interaction occurs.

<!-- Twitter single-event website tag code -->
<script src="//platform.twitter.com/oct.js" type="text/javascript"></script>
<script type="text/javascript">twttr.conversion.trackPid('xxxxxx', { tw_sale_amount: 0, tw_order_quantity: 0 });</script>
<noscript>
<img height="1" width="1" style="display:none;" alt="" src="https://analytics.twitter.com/i/adsct?txn_id=xxxxxx&p_id=Twitter&tw_sale_amount=0&tw_order_quantity=0" />
<img height="1" width="1" style="display:none;" alt="" src="//t.co/i/adsct?txn_id=xxxxxx&p_id=Twitter&tw_sale_amount=0&tw_order_quantity=0" />
</noscript>
<!-- End Twitter single-event website tag code -->

Implement it via GTM by using a Custom HTML tag. Unfortunately, Twitter’s Universal Website Tag template in GTM does not support single tags.

A quick reminder, if you want to track browsers with JavaScript disabled, read this tutorial I published for Facebook Pixel. Apply the same technique to Twitter Event Tags.

By the way, one more thing to mention. Single Event Tag does not support custom attributes (or at least I could not find how to do that). So if you want to pass videoTitle with a Watched Video single tag, you’re out of luck.

 

Verify single website tag

If you wish to track several custom events, you’ll have to create a separate conversion for each event and implement those tracking codes via separate Google Tag Manager Custom HTML tags.

Once those tags are created, enable GTM Preview and Debug mode and check with Twitter Pixel Helper Chrome Extension whether all hits were sent successfully to Twitter’s servers.

After you’ve installed the extension, head over to the website you’re currently working on and refresh the page. Then, click Twitter Pixel Helper’s icon and you’ll see the expanded Pixel report.

If everything is working smoothly, publish changes to the live environment.

After that, you’ll have to wait about 24 hours for the initial data to appear in your reports. Until then, all tracking codes will be displayed as unverified in Twitter Ads interface.

 

Track custom events with Twitter Pixel: final words

Twitter Pixel is like an ugly friend of Facebook Pixel, not so smart, not so beautiful, not so sophisticated. Yet, you have to hang out with it sometimes. You can get the job done but the process is not very pleasant and you’ll be stuck with some limitations.

• Twitter Universal Website Tag does not support custom events and attributes. You’ll have to use Single Event Tags for that.
• Even with Single Event Tag, custom attributes are not supported.
• For each custom event, you’ll have to create a conversion in Twitter Ads account, first.
• In Google Tag Manager, you’ll have to use Custom HTML tags because Twitter Universal Tag template does not support Single Event Tags.
• Twitter Pixel’s documentation (posted in their Knowledge Base) is pretty poorly written leaving users with many unanswered questions. I hope they’ll start consulting web analysts and their customers one day.

Nevertheless, it’ better than no custom event tracking at all. But you have to admit it’s a pretty damn low bar.

If you notice any errors in this blog post or have a better solution how to track custom events with Twitter Pixel and GTM, let me know in the comments section below.