Про куки, Web Storage

Источник

Web Storage — это более новое изобретение, чем куки. У web storage два интерфейса: localStorage and sessionStorage.

Их отличия:

The main difference is that the latter persists for the duration of the browser session (i.e. is flushed when the browser instance is shut down), and the former persists indefinitely.

Куки и GTM

Доставать куки можно с помощью 1st Party Cookie Variable.

Установить куки можно с помощью Custom JavaScript Variable named {{JS – setCookie}}:

function() {
 return function(name, value, ms, path, domain) {
 if (!name || !value) {
 return;
 }
 var d;
 var cpath = path ? '; path=' + path : '';
 var cdomain = domain ? '; domain=' + domain : '';
 var expires = '';
 if (ms) {
 d = new Date();
 d.setTime(d.getTime() + ms);
 expires = '; expires=' + d.toUTCString();
 }
 document.cookie = name + "=" + value + expires + cpath + cdomain;
 }
}

Чтобы использовать переменную в скрипте:

{{JS - setCookie}}('session', 'true', 1800000, '/', 'simoahava.com');

CSS селекторы

SELECTOR DESCRIPTION
.thisclass Matches if element has class “thisclass”
.thisclass.thatclass Matches if element has class “thisclass” and class “thatclass”
#thisid Matches if element has ID “thisid”
#main .navlink Matches if element has class “navlink” and is a descendant of an element with the ID “main”
div#main > .navlink Matches if element has class “navlink” and is the direct child of a DIV element with the ID “main”
:checked Matches if element is checked (radio button or checkbox)
[data-title*=”chairman mao”] Matches if element has attribute “data-title” with the string “chairman mao” somewhere in its value
a[href$=”.pdf”] Matches if element is a link (A) with a HREF attribute that ends with “.pdf”
.contactmail:only-child Matches if element has class “contactmail” and is the only child of its parent

Источник: https://www.simoahava.com/analytics/matches-css-selector-operator-in-gtm-triggers/

 

cookieDomain : auto или Субдоменное отслеживание

Проблема:

However, if the visitor first visits test.simoahava.com, and then moves to www.simoahava.com, these two domains will have different _ga cookies, and thus different Client IDs, and thus the user will be a different user with a new session!

Вот пример:

https://screenpresso.com/=DSBic

https://screenpresso.com/=eTsOf

Решение:

 

Почему это исправит ситуацию:

The answer is in the cookieDomain setting. When you set cookieDomain to auto, the following will happen with a (fictional) domain like www.simoahava.co.uk:

GA tries to write the cookie on .co.uk, which is the first possible root domain candidate. This fails because the browser is not authorized to write a cookie on a top-level domain like that.
Next, GA tries to write the cookie on .simoahava.co.uk, which is the next possible root domain candidate. This works because that’s a valid domain to write the cookie on.

Пользовательские переменные в Google Tag Manager

http://prometriki.ru/polzovatelskie-peremennie-v-google-tag-manager-chast-2/

Тип Переменная JavaScript

Принимает значение переменной JavaScript, имя которой указано в поле Имя глобальной переменной

Тип Пользовательское событие

Принимает значение, равное текущему значению переменной event.

Тип Собственный код JavaScript

Один из самых полезных типов переменных, указав который можно “написать” собственную переменную на языке JavaScript, в зависимости от различных условий. Обязательно содержимое макроса должно быть заключено в конструкцию вида:

function(){
ВАШ КОД НА JAVASCRIPT
return ОДНА ИЗ ПЕРЕМЕННЫХ ИСПОЛЬЗОВАВШИХСЯ ВЫШЕ;
}

Тип Таблица поиска

Также один из полезнейших типов переменных, который позволяет избежать использование конструкций if … else, а также switch. Поскольку лучше один раз увидеть, подготовил изображение с комментариями, думаю, что это наиболее удобный вариант описывающий логику работы переменной:

 

Тип URL

Это переменная для работы с различными URL. Каждый URL описывается следующим образом:

 

О dataLayer

Итак, начнем с главного – dataLayer это название переменной JavaScript, которая служит для передачи данных, которые Google Tag Manager не может получить сам, но они необходимы ему для работы, такая переменная называется уровнем данных.

С одной стороны, это массив (об этом говорят квадратные скобки и сам метод push()). С другой стороны – это объект (почему нет?). Ведь у него есть свойства и методы.

dataLayer.push(); Конструкция push() предназначена для добавления значения в массив, не более.

Советы по GTM

Использование DOM элементов (document ready)

Если вы в своём коде собираетесь обращаться к элементам которые находятся на страницы (кнопки, формы, поля и пр.), то свой код нужно оборачивать в такую конструкцию:

$(document).on('ready', function(){
    тут_вставьте_ваш_код
});

Это даст гарантию того, что ваш код не сработает раньше, чем загрузятся элементы DOM (т.е. страница).

 

Сохранность кода (замыкание)

При интеграции кода GTM в глобавльную обрасть видимости попадают все ваши объявленные переменные, что может повлечь перезатирания переменных, которые используются на сайте. Для экранирования вашего кода стоит использывать замыкания. (https://developer.mozilla.org/ru/docs/Web/JavaScript/Closures)

(function(){
    тут_вставьте_ваш_код
})();

Узнать текущую и предшествующиую страницуwindow.location + document.referer

  • Чтобы узнать с какой страницы пришел пользователь стоит использовать глобальную переменную document.referrer
  • Для того, чтобы узнать на какой странице сейчас находится пользователь стоит использовать переменную window.location (http://javascript.ru/window-location):

<tbody> </tbody>

Свойство Описание Пример
hash часть URL, которая идет после символа решетки ‘#’, включая символ ‘#’ #test
host хост и порт www.google.com:80
href весь URL http://www.google.com:80/search?q=javascript#test
hostname хост (без порта) www.google.com
pathname  строка пути (относительно хоста) /search
port номер порта 80
protocol протокол http:
search часть адреса после символа ?, включая символ ? ?q=javascript

Пример:

dataLayer.push({'event': 'GAevent', 'eventCategory': 'категория', 'eventAction': 'действие', 'eventLabel': window.location.href});

Проверять есть ли jQuery на странице

Иногда разработчики сайтов не используют jQuery, поэтому стоит проверить загружен ли он на странице.
Для этого зайдите в консоль и в строке ввода вставьте jQuery. Если вывелось Uncaught ReferenceError: jQuery is not defined(…), то значит jQuery не подключен на странице и стоит его подключить или попросить разработчиков.

Если же jQuery подключен, но ваш код срабатывает раньше чем он загружается, то можно использовать функцию window.onload:

window.onload = function() {
    тут_вставьте_ваш_код
}