Я написал эту статью по мотивам настройки отображения счетчика просмотров на своем блоге. При переходе с wordpress на tilda потерялись данные о количестве просмотров страниц на блоге, которые были стандартным модулем wordpress, а в tilde такого функционала не оказалось. Но так как я пишу про веб-аналитику, то есть одно место, где такие данные есть, это, как ни странно Google Analytics. Так воспользуемся же им, для отображения счетчика просмотров.

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

Я не стал пользоваться напрямую core reporting API или другими, для того, чтобы вытащить данные, так как это, потенциально может быть небезопасно при реализации через GTM. Поэтому схема следующая:

— С помощью add-on для Google Spreadsheet формируем выгрузку нужных данных

— Создаем новую переменную в GTM типа lookup table, в которой ставим соответствие старых URL с новыми (так как адресация тоже поменялась)

— Пишем небольшой js код, в тэге custom HTML, где собираем эту информацию и выводим на сайте

Самая простая часть работы, устанавливаем add-on, если он еще не стоит, и делаем схему выгрузки:

Начальная дата — когда я поменял счетчик Google Analytics на сайте, конечная дата — сегодня (today).

Выгружаем метрику — ga:pageview (количество просмотров страниц) и параметр — ga:pagePath (URI страницы)

И так как в выгрузке есть различные служебные и спам-страницы, делаем фильтр — ga:pageviews>100;ga:pagePath!@?s;ga:pagePath!~category|channel|page|tag;ga:hostname!@school (исключаем страницы с меньше 100 просмотров, просмотры категорий, youtube канала и сервисных страниц и поддомен school)

После чего, включаем регулярное обновление:

И после запуска скрипта получаем нужные данные на новом листе, который я назвал count:

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

Как раз для таких случаев в GTM есть специальный тип переменных — lookup table, где в значение input variable мы указываем переменную {{Page Path}}, те наш URI, и описываем соответствия:

Подготовка закончена, и теперь нужно написать код, который бы брал данные с моей таблицы, сверял с переменной lookup table URl, если есть записи со старыми URI и выводил эту информацию на сайт.

Сначала нам надо получить данные из Google Spreadsheets в GTM, и так как Google имеет API, которое поддерживает JSONP, что для нас означает, что мы можем опубликовать наш лист в документе Spreadsheets и получить к нему доступ с другого сайта.

Для этого нужно сделать следующее:

— Опубликовать лист с нужными данными (в моем случае это будет лист count)
— Получить id документа и листа
— В GTM включить скрипт, который обращается к API
— Написать функцию, которая обрабатывает полученные данные и выводят их на сайте


1. Публикуем нужный лист

Для публикации заходим в пункт меню File и выбираем Publish to the web и в выпадающем окошке задаем нужный лист и выбираем тип csv:

2. Получаем id документа и листа

С id документа все просто, та ссылка, которая доступна в окошке при публикации его содержит:

docs.google.com/spreadsheets/d/1-9iicX1oBglppWYxJWsguJENPj2v2LUb-y6-bhKh4C8/pubhtml?gid=1670181927&single=true

где id, это 1-9iicX1oBglppWYxJWsguJENPj2v2LUb-y6-bhKh4C8

C id листа все сложнее, я нашел следующий способ: переходим по вот такой ссылке: https://spreadsheets.google.com/feeds/worksheets/your-spreadsheet-id/private/full

где вставляем наш id документа, в результате получаем вот такой файл:

Где и хранится наш id листа:
<entry>
<id>https://spreadsheets.google.com/feeds/worksheets/1-9iicX1oBglppWYxJWsguJENPj2v2LUb-y6-bhKh4C8/private/full/ormdszh</id>
<updated>2017-03-11T13:17:18.282Z</updated>
<category scheme='http://schemas.google.com/spreadsheets/2006' term='http://schemas.google.com/spreadsheets/2006#worksheet'/>
<title type='text'>count</title>

В нашем случае это — ormdszh

3. Обращение к API

Создаем новый тэг типа Custom HTML и вставляем туда следующий код (заменяя выделенные параметры своими):

<script src= "https://spreadsheets.google.com/feeds/cells/your-spreadsheet-id/your-worksheet-id/public/values?alt=json-in-script&callback=sheetLoaded" ></script>

После чего, собственно, мы можем работать с данными из spreadsheets в GTM.

4. Callback функция, которая обрабатывает данные

В базовом виде она выглядит следующим образом:

function sheetLoaded(spreadsheetdata) {
// do something with spreadsheet data here
console.log(spreadsheetdata);
}

Я немного актуализировал ее для своих целей и у меня получилось следующее:

<script>
var sdata;
function sheetLoaded(spreadsheetdata) {
var count = 0;
sdata = spreadsheetdata;

for (var i=17; i< (sdata.feed.entry.length); i++) {
if ({{Page Path}} == sdata.feed.entry[i].content.$t) {
count += parseInt(sdata.feed.entry[i+1].content.$t);
}
if ({{old page}} == sdata.feed.entry[i].content.$t) {
count += parseInt(sdata.feed.entry[i+1].content.$t);
}
i++;
}

if (count != 0) {
$('div[id *= "rec"]:eq(5)').append('<div style="font-weight:bold; font-family:Roboto; color: #ffffff; font-size:28px;background-color:#263238;" align="center">'+count+' просмотров</div>');
}
}
</script>
<script src="https://spreadsheets.google.com/feeds/cells/1-9iicX1oBglppWYxJWsguJENPj2v2LUb-y6-bhKh4C8/ormdszh/public/values?alt=json-in-script&callback=sheetLoaded"></script>

Весь этот код вставляем в тэг типа Custom HTML и задаем триггер, в моём случае это обычный Page View. И публикуем.

В результате, раз в час обновляется лист в Google Spreadsheets с данными о pageview и для каждого просмотра страницы тянуться данные от туда и выводятся на сайте.

Я думаю, что это не супер крутой способ сделать счетчик просмотров, но было очень интересно объединить данные из Google Spreadsheets и GTM, что успешно получилось.