Как добавить автоматическую рекламу Adsense, счетчики Я.Метрики, Analytics в AMP и Турбо страницы

Как добавить автоматическую рекламу Adsense, счетчики Я.Метрики, Analytics в AMP и Турбо страницы

AMP и Турбо-страницы разработаны независимыми разработчиками при поддержке и активном продвижении поисковыми гигантами Яндекс и Google. Эти технологии предназначены для ускорения загрузки мобильных версий страниц сайтов.

Они не много по разному устроены, но преследуют одну цель. Ведь известно, что среднестатистический пользователь не ждет загрузку сайта больше 3 секунд. А средняя скорость загрузки мобильных версий сайтов сейчас достигает 22 секунды. AMP и Турбо помогает не терять таких посетителей.

Еще не маловажный факт. Быстрая загрузка страницы положительно влияет на пользовательский опыт и конверсию. Посетителю нравится моментальная загрузка и он охотнее кликает по рекламе.

Меня часто спрашивают как работают AMP и Турбо страницы. Как в них вставить рекламу или счетчики. Что бы постоянно не повторяться, решено написать небольшой мануал по настройке.

Что такое AMP от Google

AMP так и переводиться – Ускоренные Мобильные страницы. Html код таких страниц чище и компактнее. И они очищены от лишних скриптов. Помимо оптимизированного кода загружаются они не хостинга сайта, а с кеша самого Google. Что дает не только значительное ускорение, но и снижает нагрузку c сайта.

Создание AMP версий страниц

Для популярных CMS систем есть простые и удобные плагины. Для WordPress есть официальный плагин AMP:

AMP

После установки на сайте автоматически создаются AMP-версии страниц. В настройках можно выбрать несколько вариантов: отдельные страницы, дублирование и полный переход на AMP.

Для просмотра AMP-страниц, нужно добавить в конец ссылки ?amp

А в результатах поиска Google такие страницы будут помечаться молнией и, по заявлению поисковика, они ранжируют их выше обычных сайтов.

Установка рекламы Adsense в AMP

Для размещения рекламных блоков Adsense в AMP нужно активировать соотвествующий переключатель в личном кабинете Google Adsense.

И вставить дополнительный код для AMP:

<script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"> </script> <amp-auto-ads type="adsense" data-ad-client="ca-pub-***************"> </amp-auto-ads>

Если нужна установка автоматических блоков в AMP, на сайте должны быть включены автоматические блоки для обычной версии сайта.

Установка счетчиков Яндекс Метрики, Analytics и др. в AMP

Обычные коды счетчиков в AMP не работают. Все лишние скрипты просто вырезаются со страницы. И для таких случаев разработали универсальные коды. У них есть много различных параметров, но я приведу максимально простые варианты для Яндекс Метрики, Analytics, Mail.ru и LiveInternet.

У них один принцип, так что любой другой счетчик можно так же установить. Звездочки нужно заменить на id вашего счетчика.

Если у вас нет специального редактора для AMP страниц, то нужно этот код добавить рядом с обычным кодом счетчиков. Друг друга они не заменяют.

Яндекс Метрика

<amp-analytics type="metrika"> <script type="application/json"> { "vars": { "counterId": "********" } } </script> </amp-analytics>

Google Analytics

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> <amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "UA-********-*", "config" : { "UA-********-*": { "groups": "default" } } } } </script> </amp-analytics>

[emailprotected]

<amp-analytics type="topmailru" id="topmailru"> <script type="application/json"> { "vars": { "id": "*******" } } </script> </amp-analytics>

LiveInternet

<amp-analytics id="analytics_liveinternet"> <script type="application/json">{ "requests": { "pageview": "https://counter.yadro.ru/hit?u${ampdocUrl};r${documentReferrer};s${screenWidth}*${screenHeight}*32;h${title};${random}" }, "triggers": { "track pageview": { "on": "visible", "request": "pageview" } } }</script> </amp-analytics>

Что такое Турбо-страницы от Яндекса

«Турбо-страницы» — технология быстрой загрузки мобильных веб-страниц. Работает в мобильном поиске компании «Яндекс». Включает в себя создание и размещение в поисковой выдаче специальных облегченных версий мобильных веб-страниц.

Википедия

Турбо-страницы в поиске помечаются значком ракеты. Что символизирует быстроту загрузки таких сайтов.

Включение Турбо-страницы

Включение Турбо-страниц осуществляется в Яндекс Вебмастер. В качестве источника может послужить rss лента, созданная специальными плагинами (ссылки там же) или через загрузку по API.

Можно настроить как будет выглядеть страницы и включить например бесконечную прокрутку.

Установка RTB блоков Рекламной Сети Яндекса в Турбо-страницы

Там же в Вебмастере в разделе Турбо-страницы можно настроить рекламные блоки.

Создаете RTB блок в Рекламной сети Яндекса и вставляете в желаемое поле. Например блок в контенте. Доступна авторасстановка или ручное расположение, а справа будет превью вашего сайта и установленной рекламой.

Установка счетчиков Метрики и Analytics в Турбо-страницы

Для метрик так же не нужно устанавливать дополнительный код на сайт, все в вебмастере. В разделе веб-аналитика можно добавить номер счетчика Метрики, Analytics и другие популярные.

Турбо-страницы на десктопе

Недавно включили бета-версию статейных Турбо-страниц для персональных компьютеров. Настройки аналогичны с мобильными страницами.

Оцените статью
Информационный ресурс для любителей компьютеров и IT технологий