Facebook Instant Articles: how to use the Google Analytics analytics.js tracking code

Facebook Instant Articles allows you to use third-party analytics, such as Google Analytics, to track the performance of your articles. Here I demonstrate how to use the Google Analytics analytics.js tracking code with Instant Articles.

analytics.js:

<!-- Google Analytics --> <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', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview'); </script> <!-- End Google Analytics -->

According to the Instant Articles documentation, to use Google Analytics you just need to enclose the analytics.js tracking code in the required figure and iframe tags and insert it within the body of your Instant Article (not in the header or footer), as shown below.

Original analytics.js tracking code:

<figure class="op-tracker"> <iframe> <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', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview'); </script> </iframe> </figure>

Simply replace UA-XXXXX-Y with your own Google Analytics ID and the above example will already work. However, you will not be able to distinguish traffic from Instant Articles from all other traffic, and you will also not be able to identify specific articles being viewed. To do that you need to use an enhanced tracking code, as follows.

Enhanced analytics.js tracking code:

<figure class="op-tracker"> <iframe> <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', 'UA-XXXXX-Y', 'auto'); ga('set', 'campaignSource', 'Facebook'); ga('set', 'campaignMedium', 'Instant Articles'); ga('set', 'title', 'Instant Articles: '+ia_document.title); ga('send', 'pageview'); </script> </iframe> </figure>

Note that three lines have been added to identify the campaign source (Facebook), campaign medium (Instant Articles), and title of the target article.

Click here to use the new Global Site Tag or gtag.js tracking code.