Как измерить одностраничный веб-сайт, использующий фрагменты URL, с помощью Tealium/GA?

Question

Меня попросили захватить аналитику на сайте. Веб-сайт состоит из 5 веб-страниц, но теперь я понимаю, что домен тот же, и единственное, что меняется, - это фрагмент URL, то есть www.domain.com#a, www.domain.com#b. Единственная информация, которая поступает в GA - это домен, и он не включает фрагменты URL. Я использую код отслеживания Tealium, и данные отправляются обратно в Google Analytics. Как я могу настроить это так, чтобы я мог видеть весь URL в GA, включая фрагменты URL?

Answer 1

Итак, с точки зрения Tealium нам нужно вызвать событие просмотра при загрузке нового фрагмента (если я правильно понимаю).

Если мы предполагаем, что изменение фрагмента происходит при щелчке по ссылке, тогда нам нужно вызвать событие просмотра, когда происходит щелчок по ссылке.

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

Следовательно, нам нужен Tealium для построения новых точек данных и передачи их в виде события в GA.

Простейший способ сделать это в Tealium (при прочих равных условиях) - через расширение jQuery onHandler.

Расширение jQuery требует следующую информацию:

1. JQuery селектор (или селекторы), чтобы обратить внимание на
2. Тип события "Триггер включен" (в данном примере это будет щелчок)
3. Отслеживание типа события для запуска (в этом случае просмотрите событие)
4. Переменная и значения для установки конфигурации расширения Tealium jQuery onHandler
5. обратите внимание, что всегда полезно установить условие для ваших расширений jQuery, чтобы они запускались только при необходимости, а не всегда и везде

В этом расширении я установил следующее:

1. Селектор jQuery: '#MyID_1, #MyID_2, #MyID_3' - да, вы можете передать список селекторов или почти любой другой допустимый оператор селектора jQuery
2. Триггер включен: "нажмите"
3. Отслеживание событий: "просмотр"

4. 3 переменные:

   а. 'page_name': $(this).text(); // получить текст ссылки

   б. 'my_url': utag.data['dom.url']+$(this).attr('href') // построение полного URL, включая фрагмент //utag.data['dom.url'] - это переменная / точка данных, которую Tealium автоматически генерирует

   с. мой путь: utag.data['dom.pathname']+$(this).attr('href'); // построение пути //utag.data['dom.pathname'] - это переменная / точка данных, которую Tealium автоматически генерирует

ПРИМЕЧАНИЕ: убедитесь, что для каждого из них задан тип "Код JS", иначе ваш JavaScript будет заключен в кавычки в виде строки.

Почему эти три переменные? Как я понимаю GA, это те значения, которые ожидаются для нового представления страницы - location/URL, path и Title, поэтому мы создаем эти значения в расширении, чтобы передать их GA в событии view.

Теперь нам просто нужно сопоставить эти новые переменные с GA.

1. my_path привязан к page в наборе инструментов картирования GA
2. page_name привязан к title
3. location не является параметром по умолчанию в инструментах отображения, поэтому нам нужно добавить пользовательскую переменную назначения под названием location и карта my_url к этому. отображение пользовательских переменных для GA

Вот как вы делаете это из Tealium и минимального кодирования. Если по какой-то причине вы не хотите / не можете делать это внутри Tealium, это предоставляет нам очень хороший шаблон для пользовательской функции, добавляемой в нашу кодовую базу:

`$(document.body).on('click', '#altID', function(){
     utag.view({
         "page_name": $(this).text(),
         "my_url": utag.data['dom.url'] + $(this).attr('href'),
         "my_path": utag.data['dom.pathname'] + $(this).attr('href')
     })
})`

Смотрите оба в действии здесь на CodePen.