Я.Метрика Next

Основной домен

Проверяем как расставлены идентификаторы по кнопкам + data-goal

Перед тем, как настраивать метрику, необходимо проверить как проставлены классы на всех кнопках на сайте по этой таблице + проверяем , чтобы data-goal и классы кнопок совпадали.

Например: class=»btn-banner» и data-goal=»btn-banner»

Создаем счетчик в Я.Метрике

1. Заходим в Я.Метрику и нажимаем «Добавить счётчик».
2. Проставляем имя счётчика, адрес сайта, НЕ ставим галочку «принимать с указанных адресов», автоматические цели выключаем, вебвизор — включаем.

5. Ставим галочку «Я принимаю условия Пользовательского соглашения»

6.Далее нажимаем «Создать счетчик»

7. На следующем шаге нажимаем «начать пользоваться»

Добавляем цели на кнопки

Название соответствует названию, тип условия — js-событие, id цели — совпадает и название класса.

Проставляем цели на скролл

Всего их три, и мы копируем их один в один из счётчика в счётчик. Единственное, что стоит учесть — это идентификатор цели будет не содержать, а совпадать. Названия идентификаторов тоже копируем один в один.

Устанавливаем счётчик на сайт

В файле main.js добавляем раскомменчиваем строчку кода:

Вместо текущей строки вставляем функцию и меняем номер счетчика. Console.log тоже перемещаем в условие:

if (typeof ym === "function") {
            ym(94117567,'reachGoal', goal)
            console.log(`goal ${goal} reached`)
        }

Номер счетчика можно посмотреть здесь:

Нужно раскомментировать код ниже и меняем номер счетчика в четырех местах (проверяем, чтобы код был обернут в отложенную загрузку setTimeOut):

Перезаливаем файл main.js yf на сервере -> перезапускаем нужный сервис в теминале командой — systemctl restart hmhome(нужно поменять название домена) -> cкидываем кэш на Клауде, так как работали с main.js (файл кэшируется).

Проверяем подключение

Проверяем в Chrome: на обычном домене во вкладке network (сеть) при скролле будет отрабатывать вебвизор.

Amp домен

Проверяем чтобы расставленные классы у кнопок совпадали с id в метрике. data-goal проверять не нужно , так как на amp данный атрибут не используется.

Скачиваем страницы с сервера и на каждой странице после закрывающего тэга </style> вставляем

 <script src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" async="" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script>
	  <script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script>

Далее после закрывающего тэга </main> на каждой странице вставляем скрипт подключения счетчика и проверяем классы кнопок(ненужные удаляем , нужные добавляем)

 <amp-analytics type="metrika">
    <script type="application/json">
       {
       "vars": {
           "counterId": "96294709"
       },
       "triggers": {
           "partsScroll1": {
               "on": "scroll",
               "scrollSpec": {
                   "verticalBoundaries": [0, 30]
               },
               "request": "reachGoal",
               "vars": {
                   "goalId": "partsScrollGoal1"
               }
           },
           "partsScroll2": {
               "on": "scroll",
               "scrollSpec": {
                   "verticalBoundaries": [31, 65]
               },
               "request": "reachGoal",
               "vars": {
                   "goalId": "partsScrollGoal2"
               }
           },
           "partsScroll3": {
               "on": "scroll",
               "scrollSpec": {
                   "verticalBoundaries": [66, 100]
               },
               "request": "reachGoal",
               "vars": {
                   "goalId": "partsScrollGoal3"
               }
           },
           "regButtonClick": {
               "on": "click",
               "selector": ".btn-reg",
               "request": "reachGoal",
               "vars": {
                   "goalId": "btn-reg",
                   "yaParams": ""
               }
           },
           "logButtonClick": {
               "on": "click",
               "selector": ".btn-login",
               "request": "reachGoal",
               "vars": {
                   "goalId": "btn-login",
                   "yaParams": ""
               }
           },
           "bannerBtn": {
               "on": "click",
               "selector": ".btn-banner",
               "request": "reachGoal",
               "vars": {
                   "goalId": "btn-banner",
                   "yaParams": ""
               }
           },
           "contentBtn": {
               "on": "click",
               "selector": ".btn-content",
               "request": "reachGoal",
               "vars": {
                   "goalId": "btn-content",
                   "yaParams": ""
               },
               "androidBtn": {
                   "on": "click",
                   "selector": ".btn-app-android",
                   "request": "reachGoal",
                   "vars": {
                       "goalId": "btn-app-android",
                       "yaParams": ""
                   }
                   ,
               "iosBtn": {
                   "on": "click",
                   "selector": ".btn-app-ios",
                   "request": "reachGoal",
                   "vars": {
                       "goalId": "btn-app-ios",
                       "yaParams": ""
                   }
                }
            }
           }
       }
   }
    </script>
 </amp-analytics>

Проверяем amp валидацию , если все ок, то заливаем страницы на сервер -> обновляем папку с проектом командной — systemctl restart mostbet-luck2(нужно поменять домен) -> проверяем во вкладке network (сеть) при скролле будет отрабатывать вебвизор.