Установка счетчика в Facebook Instant Articles

Счетчик Яндекс.Метрики можно установить в моментальные статьи Facebook (Facebook Instant Articles).

Из-за особенностей реализации моментальных статей JavaScript-код счетчика изолирован от других HTML-элементов. Поэтому следующие возможности Метрики будут недоступны:

  • Вебвизор;
  • Карты кликов, ссылок и скроллинга;
  • Аналитика форм;
  • отправка данных электронной коммерции.

Чтобы добавить код Метрики в моментальную статью, нужно использовать специальные HTML-элементы.

  1. Установка счетчика
  2. Отправка параметров визитов
  3. Отправка параметров посетителей
  4. Пример интеграции счетчика

Установка счетчика

Добавьте следующий код в элемент body моментальной статьи:

...
<figure class="op-tracker">
  <iframe>
    <!-- Код счетчика -->
  </iframe>
</figure>
...

Счетчик будет учитывать посещения для страницы, которая указана в элементе head как каноническая:

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

Чтобы проверить работоспособность счетчика, воспользуйтесь эндпоинтом от Facebook.

Отправка параметров визитов

  1. Создайте JavaScript-объект yaParams:
    ...
    var yaParams = {
      title: "Article title",
      referrer: "Article referrer"
    }
    ...
  2. Передайте параметры при инициализации счетчика:

    ...
    var yaCounterXXXXXX = new Ya.Metrika({id: XXXXXX, params: window.yaParams||{}});
    ...

    Facebook предоставляет определенный набор данных о моментальных статьях, которые можно использовать в качестве параметров визитов. Данные можно взять из JavaScript-объекта ia_document.

Отправка параметров посетителей

  1. Отправьте данные о просмотре с помощью метода hit после инициализации счетчика:
    ...
    w.yaCounterXXXXXX = new Ya.Metrika({
      id:XXXXXX,
      defer: true
    });
    w.yaCounterXXXXXX.hit(ia_document.shareURL, {
      referer: ia_document.referrer,
      title: ia_document.title
    });
    ...
  2. Отправьте параметры посетителей с помощью вызова функции userParams:
    ...
    w.yaCounterXXXXXX.userParams({ user_key: "user_value"});
    ...

Пример интеграции счетчика

<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 — номер вашего счетчика.