How the Facebook Pixel is Used to Track Newsletter Subscriptions

Ads are a convenient yet expensive way of generating traffic to your offer. Naturally, you want to know how well your ads are performing in order to tweak them if necessary.

Screenshot 2016-04-15 18.40.57

Metrics You Need

When using Facebook ads to send traffic to your site, you’re interested to know how many users click on your ad (CTR, click-through-rate) to find out how well your ad is performing. This is a statistic provided by Facebook – to calculate it, they divide the number of times a user clicked on a link in your ad by the number of times the ad was shown.

However, this is only one half of the story. Let’s imagine your ad is very attractive and makes users click on your link very often, resulting in a high CTR. Let’s imagine furthermore that their first reaction upon seeing your site is “Oh! This isn’t what I expected”. They’ll close the tab, and you’ve lost them. CTR will not inform you of this problem – you might think your ad is performing very well for a long time, when in fact you’re just generating useless traffic that’s all dropping off at the first opportunity.

In order to find out about this problem, you need to track what users do after they’ve clicked on the link in your ad. In particular, you want to track conversions (e.g. “did your visitors subscribe to your newsletter after having been sent to your site?”). Since such actions do not happen on Facebook anymore, it’s not quite so easy for Facebook to take care of this. This is were the Facebook pixel comes in.

The Facebook Pixel and Thank-You-Pages

The Facebook pixel allows Facebook to track users after they’ve left Facebook itself. It’s basically a bit of JavaScript that will “call home to Facebook” to document users’ actions. It’s normally very convenient to use: You include it on your page header, and every page a user visits will inform Facebook.

Screenshot 2016-04-15 19.02.48

A common approach to track subscriptions to newsletters is to redirect the user to a “Thank You”-page after successful subscription. The pixel will call home from the thank you page, and you can configure your ad so that Facebook will consider a pixel call from a “Thank you”-page a subscription confirmation. It will keep track of this by showing you a “conversion” metric. If you see a high CTR but a low conversion rate, you know that your ad is probably not communicating the right message.

The Problem With Elegantthemes Bloom Plugin

ElegantThemes Bloom is a feature-rich email opt-in plugin for WordPress. It makes it easy to create nice-looking signup-forms (which you can find on this blog) and integrates with quite a few list providers. I use it not only because it comes with my ElegantThemes subscription, but also because it is one of very few opt-in plugins that properly integrate with ActiveCampaign.

However, the plugin has two major flaws:

  • It doesn’t do exit-intent
  • It doesn’t redirect to “Thank-You”-pages

Exit-Intent has become a standard feature for many plugins, and I find popups which appear just before you’re getting ready to leave a page less annoying than timed popups.

This article is about the second flaw though: There is no option to redirect to another page after successful subscription. Instead, the plugin will show a message by modifying the current page using JavaScript. This does not allow the pixel to call home. There is no option to configure tracking or redirection, even though users have been requesting this feature for more than a year. 

Not all is lost, here’s my instruction on how to work around this flaw:

The Soloprenaut Workaround

The following solutions could fix the problem:

  1. Implement redirection. This would require a new plugin configuration option (modifying PHP plugin code)
  2. Implement Facebook standard events so that the plugin sends those upon subscription. This would require modifying the plugin’s JavaScript code.
  3. Latch onto DOM events to send Facebook standard events ourselves.

Solutions one and two would require modifying the plugin code. While certainly doable, I don’t quite feel like doing Elegantthemes’ work (I’m paying for support, after all *nudge nudge*). The main reason for not doing it is that the next plugin update might break the modification, and as a solopreneur, I have enough on my plate without starting to maintain my own plugin versions as well.

Option 3 doesn’t modify the plugin code and is thus potentially more stable.

It consists of the following simple change:

Instead of inserting a shortcode into your page to render an opt-in-form like this:

[et_bloom_inline optin_id="optin_3"]

You will insert the shortcode and immediately follow up with a <script>-snippet to install an event handler:

[et_bloom_inline optin_id="optin_3"]<script>jQuery(".et_bloom_submit_subscription").click(function() { fbq('track', 'CompleteRegistration');});</script>

This will register clicks on the submit button, and manually call home to facebook with the standard event “CompleteRegistration”, which you can then use to track conversions:

Screenshot 2016-04-15 17.39.42

The above code uses jQuery. If your theme doesn’t use it you can either integrate it (which would be overkill just for this purpose) or use vanilla JavaScript to install the event handler instead. The code is also intentionally formatted as an ugly one-liner as the theme editor will otherwise insert html tags where they don’t belong.

Of course, there are downsides to this approach:

  • You have to do this every time you install an opt-in form on your site (no global configuration)
  • This doesn’t work for globally configured forms (sidebar forms, popups)

Luckily, we can identify all Bloom opt-in forms using a CSS class. This allows us to install a generic event handler in the footer of our site and take care of sidebar opt-ins:

Screenshot 2016-04-15 18.17.07

The same reasoning for not changing the plugin code applies to the theme code (footer.php), but since Elegantthemes is forcing me already to change footer.php anyway (there is no way to change the copyright information otherwise), I need to keep track of this file already. Your mileage may vary and you may find a better way to install the event handler.

This doesn’t seem to work for popups as the scripts which generate the popup are loaded after the footer, so the event handler installation in the footer doesn’t catch the popup. I’m sure somebody with more WordPress experience will easily find a better place to install the event handler, otherwise I might do some research when I get around to it.

Elegantthemes: Please Update!

This is just a workaround. I would like to keep using Bloom and, as demonstrated above, there’s not much to making it much more powerful. If Elegantthemes could just take this as a suggestion for the next update, and ideally implement redirect + exit intent as well, I think I might just have found my opt-in plugin.