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

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

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

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

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

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

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

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

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

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

AMP

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

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

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

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

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

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

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

И вставить дополнительный код для 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>

[email protected]

<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 блоков Рекламной Сети Яндекса в Турбо-страницы

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

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

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

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

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

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

Понравилась публикация? Делись с друзьями. А также подписывайся на «LAVNIK.net» в Telegram и в YouTube, чтобы всегда быть в курсе интересных новостей!