Как вызвать событие Метрики или Аналитики всего один раз изменить title

26 0
Автор: Виктор Николаеня

Бывает такое, что нужно вызвать определенное событие для счетчиков посещаемости сайта Яндекс Метрика или Гугл Аналитика один раз за сессию. Например, изменить TITLE аякс страницы при скролле.

JavaScript динамическое событие для ajax

На одном проекте мне понадобилось изменить тайтл текущей страницы при достижении пользователем определенного div блока. На веб странице располагался основной контент, ниже которого кнопка Отобразить комментарии. При нажатии на эту кнопку динамически подгружались все комментарии пользователей для данной страницы.

Чтобы счетчики аналитики посещаемости воспринимали данное событие как отображение новой страницы было принято решение изменить тег title.
Пример:
Тайтл страницы до изменений: США делает предупреждение турецкому президенту Эрдогану.
Тайтл страницы после нажатия на кнопку: 33 комментария к теме «США делает предупреждение турецкому президенту Эрдогану» — Обсуждение.

Как реализовать?
Изначально кнопка отображения комментариев реализована так:

<button name="submit"  class="wc-load-more-submit wc-loaded button">
<?php $num_comm = get_comments_number(); echo "Показать "; plural_form($num_comm, array(' комментарий',' комментария',' комментариев')); //echo $loadMoreButtonText; ?>
</button>

Чтобы отправлять события в Метрику и Аналитикс пришлось поместить кнопку в тег span, потому что при внедрении javascript кода непосредственно в кнопку перестал работать ее основной функционал. Точнее он работал, но через раз. Один раз страница загрузится и все работает, в следующий раз нет. Вы прекрасно понимаете, что посетители сайтов сегодня очень нетерпеливые и им проще закрыть сайт, чем пробовать перезагрузить страницу и снова нажать на кнопку.

Итоговый код имеет вид:

<span onclick="document.title = '<?php plural_form(get_comments_number(), array('комментарий','комментария','комментариев')); ?> к теме «<?php echo cutStr(get_post_meta($post->ID, '_yoast_wpseo_title', true)); ?>» - Обсуждение'; gtag('config', 'UA-123123123-1', {'page_path': '<?php echo $_SERVER['REQUEST_URI'];?>#commentsload'}); yaCounter123123123.reachGoal('commentsload'); updateLiveInternetCounter(); return true;">
<button name="submit"  class="wc-load-more-submit wc-loaded button">
<?php $num_comm = get_comments_number(); echo "Показать "; plural_form($num_comm, array(' комментарий',' комментария',' комментариев')); ?>
</button>
</span>

Вместо 123123123 вставьте идентификатор своего счетчика. В данном примере реализовано однотипное событие но сразу для двух систем — для Метрики Яндекса и Аналитики от Google.

Сделать тоже самое, но только один раз

Был еще такой случай. Пользователь скроллит страницу вниз. При достижении div контейнера надо снова изменить тег title. Однако здесь есть подводный камень — скролить можно вверх и вниз неограниченное количество раз, но изменить тайтл надо всего один раз.

Для этого используется такая конструкция:

var flagtop = this.flagtop || false;
if(!flagtop) {
document.title = 'Самое популярное к теме «<?php echo cutStr(get_post_meta($post->ID, '_yoast_wpseo_title', true)); ?>»';
updateLiveInternetCounter();
this.flagtop = true;
}
gtag('config', 'UA-140396429-1', {'page_path': '<?php echo $_SERVER['REQUEST_URI'];?>#b-bottom'}); return false;

Пояснение. Как видно, мы задали переменную типа флаг. В ее помощью мы будем проверять изменился уже тайтл или нет. Если тайтл изменился хотя бы раз, то условие не выполнять. А в условном операторе if мы задали функцию изменения текущего тега тайтл на другой необходимый.

Чтобы задать условие отображается необходимый контейнер или нет, измените код:

var $markermobil = $('.news-last__title');
if($win.scrollTop() + $win.height() >= $markermobil.offset().top) {
var flagtop = this.flagtop || false;
if(!flagtop) {
document.title = 'Самое популярное к теме «<?php echo cutStr(get_post_meta($post->ID, '_yoast_wpseo_title', true)); ?>»';
updateLiveInternetCounter();
this.flagtop = true;
}
gtag('config', 'UA-140396429-1', {'page_path': '<?php echo $_SERVER['REQUEST_URI'];?>#b-bottom'}); return false;
}

.news-last__title это класс необходимого контейнера.

Таким образом мы рассмотрели как динамически изменять title страницы сколько угодно раз при нажатии кнопки, либо единожды при скролле страницы до определенного div контейнера.

Предыдущие новости:

Обсуждение

500
  Подписаться  
Уведомлять