Установка счетчика в 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. Передайте параметры при инициализации счетчика:

    ...
    ym(XXXXXX, 'init', {params: window.yaParams||{}});
    ...

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

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

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

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

<body>
  ...
  <figure class="op-tracker">
    <iframe>
      <script type="text/javascript"><script>
        (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
        m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
        (window, document,'script','//mc.yandex.ru/metrika/tag.js?id=XXXXXX', 'ym')

            ym(XXXXXX, 'init', { 
                trackLinks:true,
                accurateTrackBounce:true,
                params: window.yaParams||{title: "no title"}
            });

      </script>
      <noscript><div><img src="https://mc.yandex.ru/watch/XXXXXX" style="position:absolute; left:-9999px;" alt=""/></div></noscript>
    </iframe>
  </figure>
  ...
</body>

XXXXXX — номер вашего счетчика.