Подсчет количества символов в статье

Один из примеров подсчета количества символов в тексте (статьях) контентных проектов с использованием Google Analytics и Google Tag Manager для моего блога.

Статья носит исключительно образовательный характер, хорошо иллюстрирует возможности работы в GTM и Analytics, а также позволяет познакомиться сразу с несколькими важными темами – CSS-селекторами, объектами, свойства и функциями в JavaScript, использованием переменных GTM внутри других переменных, логическими типами, нестандартным триггером активации, пользовательским параметром и специальным отчетом в Google Analytics.

Итак, начнем. Задача - подсчитать количество символов в каждой статье моего блога и отправить эту информацию в Google Analytics, чтобы получить отчет такого вида:

Реализовывать буду следующим образом (это один из вариантов, и далеко не самой оптимальный!). Создам:

1. переменную, с помощью которой извлеку текст всей статьи;
2. переменную типа «Константа»;
3. переменную, которая будет подсчитывать количество символов в двух предыдущих переменных и выводить конечное число символов;
4. переменную для триггера активации;
5. триггер активации только на определенных страницах своего блога;
6. пользовательский параметр в Google Analytics;
7. тег, который будет передавать данные в Analytics;
8. специальный отчет с только необходимыми мне метриками.

Переменная для получения содержимого статьи

Создаю переменную типа Элемент DOM с селектором .simple-text

Почему .simple-text? Внутри этого селектора отображается любая статья в моем блоге. Узнать атрибуты определенного элемента можно с помощью консоли разработчика (клавиша F12 в браузере Google Chrome).

Используя расширение CSS Selector Tester я подтвердил свое предположение, что текст статьи находится именно в этом классе. О том, что такое CSS-селекторы, читайте в этой статье. В переменной типа Элемент DOM можно использовать и идентификатор, если такой атрибут есть у отслеживаемого элемента. Сохраняю переменную.

Переменная типа «Константа»

В эту переменную я помещу текст, который отображается в конце каждой статьи. Это Понравилась статья? Поставьте оценку 5.0 -> Он не является статьей и поэтому есть смысл исключить его из подсчета символов самой статьи. Для этого я создал переменную типа Константа с этим значением:

Переменная подсчета количества символов статьи

Это переменная типа Собственный код JavaScript, которая имеет вид:

В GTM она выглядит так:

Разберем этот код подробнее.

return function() { … } - возвращение результата. Обязательным условием использования данной переменной типа Собственный код JavaScript является то, что она должна возвращать результат. В моем случае она возвращает строковое значение для переменной characterCount, которая считает разницу между количеством символов в статье и нашей константой, в которой хранится текст Понравилась статья? Поставьте оценку 5.0 ->

var articleString = {{Текст статьи}}.length – объявление переменной articleString, в которой будет хранится информация о количестве символов нашей статьи. Свойство length представляет длину строки. Для пустых строк будет возвращено 0, но таких у нас нет.

Подробнее о свойстве length читайте в этой статье.

Это же действие можно было бы сделать и без создания отдельной переменной {{Текст статьи}} в GTM, а просто добавив в код такую конструкцию:

var articleString = document.querySelectorAll(".simple-text")[0].textContent.length;

, где

• • document.querySelectorAll(".simple-text") – возвращает статический NodeList (коллекцию узлов), содержащий все найденные элементы документа, которые соответствуют указанному селектору. У меня селектор - .simple-text;
  • [0] – это конкретный элемент документа. В моем примере – это 0 элемент, в котором и находится текст статьи блога;
  • .textContent – позволяет задавать или получать текстовое содержимое элемента и его потомков. В данном случае, мы получили текст нашей статьи без каких-либо дополнительных элементов и тегов;

Помимо textContent есть еще и innerText и innerHTML. У них есть различия.

Отличие от innerText

element.innerText был введен Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:

• textContent получает содержимое всех элементов, включая <script> и <style>, тогда как innerText этого не делает.
• innerText умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как textContent этого не делает.
• Метод innerText позволяет получить CSS, а textContent — нет.

Отличие от innerHTML

innerHTML возвращает HTML. Довольно часто innerHTML используется для получения или записи текста в элемент.

Тем не менее, вместо него желательно использовать textContent. Этот метод потребляет гораздо меньше ресурсов, так как текст парсится как текст, а не HTML. Кроме того, это защищает от XSS атак.

Подробнее о textContent читайте в этой статье.

• .length – подсчитывает количество символов;

Для наглядности приведу пример подсчета символов с textContent, innerText и innerHTML.

Как видим, textContent показал наименьшее количество символов, но наиболее приближенное к правде, очищенное от стилей, тегов и т.д. Именно поэтому я буду использовать в примере его.

var rating = {{Понравилась статья - Поставьте оценку}}.length - объявление переменной rating, которая подсчитывает количество символов в нашей константе (см. выше). Оно постоянно и равно 43 (с пробелами).

var characterCount = articleString – rating – переменная, которая из общего количества символов статьи вычитает длину нашей константы (43), чтобы получить наиболее приближенную к реальности цифру.

Поскольку rating = константа (const), то мы могли не создавать для нее отдельную переменную, а просто записать конечный код в таком виде:

В результате мы получили бы одну переменную вместо 3. Но как я уже сказал ранее, это статья носит ознакомительный характер, а не показывает единственное верное решение этой задачи.

return String (characterCount) возвращает количество символов в статье в виде строки, а не числа (тип number), поскольку в Google Analytics мы будем передавать эти данные в качестве пользовательского параметра, а не показателя. Примечание: специальный показатель будет суммировать число символов, поскольку область действия в нем либо Hit (обращение), либо Товар.

Итог первой части настройки:

1. переменные внутри Google Tag Manager можно использовать в других переменных. Для их вызова существует специальный синтаксис – двойные фигурные скобки {{ }};
2. всегда есть несколько вариантов решений и код можно записывать по-разному, используя две, три переменных или же все в одной. Как вам удобнее, так и делайте.

Настройки для триггера

Теперь переходим к настройке для триггера активации. Как нам считать количество символов только в статьях? Ведь на сайте есть и другие страницы (главная, категории, теги), которые не являются статейными. Для этого нам необходимо найти общий признак у всех материалов моего блога, который есть только в статьях, но нет на других страницах сайта. Что их объединяет?

Мой блог на WordPress, и чтобы опубликовать в нем статью, я должен выбрать рубрику (категорию). Без нее мы не сможем опубликовать, а точнее она проставится сама автоматически. Рубрики отображаются над названием статьи.

На других страницах такого нет. Это отличительный знак. Я создаю переменную типа Собственный код JavaScript, которая будет проверять условие:

В GTM код выглядит так:

Она осуществляет проверку: если значение статического элемента с классом .tt-blog-cat (это класс рубрик) равно пустому значению, то вернуть false (ложь). Если в .tt-blog-cat что-то есть, то вернуть true (истина).

В консоли разработчика можно осуществить проверку и убедиться в том, как отдаются значения:

Условие для триггера создано. Теперь создаем сам триггер типа Просмотр страницы с условием активации на некоторых страницах, Категория блога – равно – true:

Теперь создаем тег. Это обычный Universal Analytics с типом Событие.

В качестве Категории я задам Page Path (часть URL, статьи), а в Действие занесу переменную с подсчитанным количеством символов в статье string.length. Не взаимодействие – True. Триггер активации – string blog (с предыдущего шага).

На этом можно было бы и закончить. Переменные есть, триггер настроен, тег передает значение количества символов. Но этого мне оказалось мало. В рамках этой статьи я хочу показать, что тоже самое значение по количеству символов в статье я могу задать и в специальном параметре, указав в качестве индекса цифру из интерфейса Google Analytics, а в качестве значения – ту же string.length.

У меня это цифра 4, пользовательский параметр с областью действия Сеанс. Ее я и добавлю в тег Universal Analytics в соответствующее поле тега:

Данный тег будет отправлять данные (Page Path + Число символов статьи + Пользовательский параметр) в Analytics всякий раз, когда пользователь будет просматривать страницу, у которой есть категория блога. Сохраню изменения.

Проверяю в режиме реального времени Analytics и в предварительном просмотре GTM настроенное событие.

Как видим, все корректно работает. Тег активируется только на статьях, а специальный параметр возвращает количество символов в статье.

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

Передавать можно и так, и так. Все зависит от вашей конкретной задачи. Таким образом, мы с вами за одну статью познакомились со следующими темами:

• CSS-селекторы;
• Объект length в JavaScript;
• Свойства textContent, innerHTML, innerText;
• Функция String;
• Использование переменных GTM внутри других переменных;
• Логические типы (true и false);
• Пользовательский параметр Google Analytics;
• Переменные типа: Элемент DOM, Константа, Собственный код JavaScript;
• Режим отладки GTM;
• Консоль разработчика;
• Расширение CSS Selector Tester для браузера Google Chrome;
• Отчет «В режиме реального времени» Google Analytics;
• Специальные отчеты.

Кто-то может посчитать, что в статье слишком мудрено описано и чересчур сложно настроено. Именно усложнение, а не упрощение, являлось основной целью материала. В нем я хотел показать всю многообразность настроек Analytics и Google Tag Manager.

Понравилась статья? Поставьте оценку ->