Over the last month or two I have been fighting Facebook Instant.  At first it was due to their slow, manual review process for approving new websites trying to utilize Facebook Instant.  My client’s theme and usage of embeds caused numerous problems for Facebook’s parsing code and the WordPress plugin made to make this integration ‘easy’ did no such thing.  Instead it shipped from Automattic with multiple bugs and was widely panned by users resulting in an average review of 2.6 out of 5 stars.

However, I was persistent, as was my client that we needed to get up and going with Facebook Instant so I kept pushing.  I finally was able to fix the issue of embeds being incorrectly parsed by Facebook and joy of all joys, have my client’s website approved for Facebook Instant.  Right away, the benefits of Facebook Instant were pretty obvious – the fast load times were fantastic and we used Facebook’s native advertising system to generate revenue and since they are a fairly large website, they did quite well.  However, one thing gnawed at me – distinguishing the traffic from regular Facebook traffic within Google Analytics.

While Automattic’s Facebook plugin had a spot to include Google Analytics code and Facebook also provided a best practice document to utilize Analytics, I simply couldn’t figure out how to make it play nice with the plugin and the existing Analytics code we used.  Finally one day I hit upon the right combination.  In an effort to help you if you are in a similar place, below you will see the code I used and a screenshot of how it looks within the Facebook Instant plugin for WordPress.  My hope is that by following the steps below, you are able to save time and start tracking your website starting today.

Step 1: Install Automattic’s much improved (they released an update 2 weeks ago that fixed many issues) Instant Articles for WP plugin and make sure your website is approved for Facebook Instant and set up correctly (I know, easier said than done).

Step 2: Go find your existing Google Analytics code within the admin section of Google Analytics.

It will look something like this –

<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘SITETRACKINGID‘, ‘auto’);
ga(‘send’, ‘pageview’);

</script>

The part that says SITETRACKINGID will be your specific site tracking ID and you will want to fill it in.

Step 3: Add the necessary additional information as shown below in the bold print.

<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);
ga(‘create’, ‘SITETRACKINGID‘, ‘auto’);
ga(‘require’, ‘displayfeatures’);
ga(‘set’, ‘campaignSource’, ‘Facebook’);
ga(‘set’, ‘campaignMedium’, ‘Social Instant Article’);
ga(‘send’, ‘pageview’, {title: ‘POST TITLE’});
</script>

Step 4: Remember to change the SITETRACKINGID to your correct Google Analytics ID.  You don’t need to modify any of the other code.

Step 5: Copy the code you created in step 3 and 4 and paste it into this box within the Instant Article for WP plugin.

analytics

Step 6: Check the box from the screenshot that says ‘Enable custom embed code’.

Step 7: Save the plugin screen.

You are done!  Remember that historical Facebook Instant articles won’t be updated unless you delete them and republish them.  However going forward, you should be able to see traffic within Google Analytics.  You can find it anywhere you can use the Source/Medium field.  This screenshot gives an example of how it will show up.

sorting

 

Contact Us Today!

If you’re interested in an affordable, responsive website design that drives results, contact our Indianapolis web design agency today. Send us an email or give us a call—we’re here to help you succeed online.

Fill out the form below to contact us now!

  • If you really like a certain site, let us know so we can get an idea of your aesthetic preferences.
  • Please detail any specific features you need or questions you have.
  • This field is for validation purposes and should be left unchanged.