Installing a tag in Facebook Instant Articles

The Yandex.Metrica tag can be installed in a Facebook Instant Article.

Due to the way Instant Articles are implemented, the JavaScript code snippet is isolated from other HTML elements. This means that the following features of Yandex.Metrica are available:

  • Session Replay
  • Click map, link map, and scroll map
  • Form analysis
  • E-Commerce data

You can use special HTML elements to add the Yandex.Metrica code snippet to an instant article.

  1. Installing a tag
  2. Transmitting session parameters
  3. Transmitting user parameters
  4. Example of tag integration

Installing a tag

Add the following code to the <body> element in the instant article:

...<figure class="op-tracker">  <iframe>    <!-- Code snippet -->
  </iframe>
</figure>
...

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

...
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="http://example.com/page.html">
  <meta property="op:markup_version" content="v1.0">
</head>
...

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

Transmitting session parameters

  1. Create the yaParams JavaScript object:
    ...
    var yaParams = {
      title: "Article title",
      referrer: "Article referrer"
    }
    ...
  2. Send parameters for tag 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.

Transmitting user parameters

  1. Send pageview data using the hit method after tag initialization:
    ...
    w.yaCounterXXXXXX = new Ya.Metrika({
      id:XXXXXX,
      defer: true
    });
    w.yaCounterXXXXXX.hit(ia_document.shareURL, {
      referer: ia_document.referrer,
      title: ia_document.title
    });
    ...
  2. Send user parameters by calling the UserParams function:
    ...
    w.yaCounterXXXXXX.userParams({ user_key: "user_value"});
    ...

Example of tag integration

<body>
  ...
  <figure class="op-tracker">
    <iframe>
      <script type="text/javascript">
        // Получаем заголовок статьи
        // и сохраняем его в переменную для параметров визитов
        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 tag ID.