Installing and configuring 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.
Installing a tag
Add the following code to the body
element in the instant article:
...
<figure class="op-tracker">
<iframe>
<!-- Tag code -->
</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
- Create the
yaParams
JavaScript object:... var yaParams = { title: "Article title", referrer: "Article referrer" } ...
Send parameters for tag initialization:
... ym(XXXXXX, 'init', {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
- Send user parameters by calling the
UserParams
function:... ym(XXXXXX, 'userParams', { user_key: "user_value"}); ...
Example of tag integration
<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', 'https://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
is your tag ID.