Installing a counter in a Facebook Instant Article

The Yandex.Metrica counter can be installed in a Facebook Instant Article. Facebook Instant Articles let you configure an analytics system using special HTML elements.

Due to the way Instant Articles are implemented, the JavaScript counter code is isolated from the other HTML elements in the article. This means that the Yandex.Metrica counter can't register the user's actions on the page with the article.

The following Yandex.Metrica features are not supported due to the way that Instant Articles are implemented:

  • Session Replay
  • Click map, link map, and scroll map
  • Form analysis
  • Transmitting data from data containers
  • Transmitting user parameters

Installing a counter

To install the counter:

  1. Add the following code to the body element in the instant article:
    ...
    <figure class="op-tracker">
      <iframe>
        <!-- Добавьте сюда код счетчика -->
      </iframe>
    </figure>
    ...
              

The counter registers sessions for the page that is specified in the head element as canonical:

...
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="your_link_here">
  <meta property="op:markup_version" content="v1.0">
</head>
...
      

To check that the counter is working, use the endpoint from Facebook.

Transmitting session parameters

To transmit session parameters:

  1. Create the yaParams JavaScript object:
    ...
    var yaParams = {
      title: "Article title",
      referrer: "Article referrer"
    }
    ...
              
  2. Pass parameters for counter initialization:
    ...
    var yaCounterXXXXXX = new Ya.Metrika({id: XXXXXX, params: window.yaParams||{}});
    ...
              

Facebook provides a specific set of data about instant articles that can be used as session parameters. You can get this data from the ia_document JavaScript object.

Example of counter integration

<body>
  ...
  <figure class="op-tracker">
    <iframe>
      <script type="text/javascript">
        // Get the article title
        // and store it in a variable for session parameters
        var articleTitle = ia_document.title;
        var yaParams = {
          title: "null",
        };
        if(articleTitle)
        {
          yaParams.title = articleTitle;
        }
        
        (function (d, w, c) {
          (w[c] = w[c] || []).push(function() {
            try {
            w.yaCounterXXXXXX = new Ya.Metrika({
                id:XXXXXX,
                trackLinks:true,
                accurateTrackBounce:true,
                params: window.yaParams||{title: "no title"}
              });
            } catch(e) { }
          });
          
          var n = d.getElementsByTagName("script")[0],
            s = d.createElement("script"),
            f = function () { n.parentNode.insertBefore(s, n); };
          s.type = "text/javascript";
          s.async = true;
          s.src = "https://mc.yandex.ru/metrika/watch.js";
      
          if (w.opera == "[object Opera]") {
            d.addEventListener("DOMContentLoaded", f, false);
          } else { f(); }
        })(document, window, "yandex_metrika_callbacks");
      </script>
      <noscript><div><img src="https://mc.yandex.ru/watch/XXXXXX" style="position:absolute; left:-9999px;" alt=""/></div></noscript>
    </iframe>
  </figure>
  ...
</body>

XXXXXX is your counter number.