от

Как “взорвать” сайт клиента с помощью GTM

смех перед монитором

С 1-м апреля, дорогие читатели!!

Мы знаем, что вы тщательно следите за нашими публикациями и внимательно читаете каждый наш пост. И вообще данный пост – внеплановый. Но нам настолько понравилось описанное здесь, что решили и с вами поделиться.

А давайте сразу к сути!
Чтобы понять всю суть, нужно сделать всего лишь 3 вещи (увы, лишь на десктопе, т.ч. бегом к компьютеру – не пожалеете). Только обязательно включите звук!

1)  запомнить вот эту комбинацию клавиш:

konami keysвверх
вниз

вверх
вниз

влево – вправо
влево – вправо

B – A

2) нажать комбинацию этих клавиш на нашей главной странице – affcontext.ru
3) нажать эту комбинацию клавиш на любой странице нашего блога. Хоть на этой странице. Просто вы увидите разные результаты )).

Для остановки происходящего можно просто перезагрузить страницу.
Здесь сделаем картинку ожидания, мол “мы ждём, пока вы это сделаете, ибо без этого дальше читать смысла нет”

 

 

просто возьми и сделай это

А дальше мы просто напишем, как мы это реализовали через GTM. Круто, да?

На самом деле всё ооочень просто и описано в оригинальной статье вот здесь – https://www.analyticsmania.com/post/konami-code-with-google-tag-manager/

Хорошей ссылкой не грех и поделиться. В этой статье есть набор и других “происходящих чуд” при этой комбинации клавиш. Мы просто выбрали для себя эти два.

НО !!!
Мы же не хотим просто сообщить вам ссылку и всё. Тем более, что там статья на английском языке, а вы можете с ним не дружить. Да и инструкция там не такая подробная. Мы сделаем детально, на русском и в картинках. Всё, как умеем.

Так что погнали.
Для начала нужно всё таки определиться, какой вариант сценария происходящего после нажатия этих клавиш вы хотите видеть. Можно выбрать из нескольких вариантов. Читать по ссылкам ничего не надо, просто переходите и жмите заветную комбинацию клавиш для оценки результата

konami keys

Ссылки с разными вариантами происходящего:
замена всех картинок на мем собаки
то, что вы видели на главной странице нашего сайта
то, что вы видели на этой странице
замена картинок на дикий видео-мем

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

Заходим на эту страницу и качаем GTM контейнер (правой кнопкой мыши и “Сохранить как”):

сохранить как

Затем идём в GTM в нужный нам аккаунт и уходим там во вкладку “Администрирование”. И жмём на “Импортировать контейнер”:

импорт GTM

Дальше выбираем недавно скачанный файл контейнера GTM и указываем, что нам нужно сделать загрузку в уже существующую рабочую область:

выбрать файл контейнера

Далее выбираем “Объединить -> Перезаписать…”

объединить gtm

И дальше важно убедится в том, что при этом импорте ничего НЕ изменяется. Должно лишь добавляться.

изменения в gtm

Скорее всего, у вас примерно так и будет. Всё таки там элементы названы довольно специфически, чтобы совпасть по именам с вашими. Количество же “созданий” может быть разным в разных сценариях поведения скрипта, т.ч. это не суть важно.

Ну и жмём на “Подтвердить”.
Затем можно уйти в “Теги”, отсортировать их по столбцу “Последнее изменение” и найти те теги, что были добавлены (картинка кликабельна):

описание тегов в gtm

Так же должен добавиться один триггер. Можете тоже его посмотреть.

А дальше всё очень просто. Если вы хотите создать конверсию в Google.Analytics на это событие, то можно зайти в тег “GA Event – Konami Code Initiated” и установить там своё значение идентификатора от Google.Analytics:

прописать свой google ua

Только не забудьте создать конверсию в самом Google.Analytics с необходимой категорией. Ну это вы итак должны знать. Если же отправлять событие вам и не надо, то можете этот тег вообще удалить.

И вообще – на этом всё по настройке :). Можно публиковать контейнер (или проверить в режиме предварительного просмотра) и на любой странице вашего сайта вбить заветную комбинацию клавиш. По умолчанию это будет работать на всех страницах.

Но в нашем случае мы захотели внести небольшие коррективы, а именно:
– сделать активацию возможной только на основной странице нашего сайта affcontext.ru
– изменить стандартный текст надписей по умолчанию
– сделать скорость замены текстов чуток помедленнее

Ну давайте разбирать по порядку.

Как сделать активацию лишь на определённой странице
Для начала, нужно определиться для себя, как будет звучать правило определения “той самой страницы”, на которой должен срабатывать сценарий. В нашем случае есть:
сайт на основном домене – affcontext.ru
блог на поддомене – blog.affcontext.ru

Т.к. мы захотели сделать активацию только на основном сайте, то нам нужно просто исключить все страницы, где в URL фигурирет поддомен –  blog.affcontext.ru.
Для этого нужно всё-таки зайти внутрь созданного триггера:

добавленный триггер в gtm

И сделать следующие настройки:

изменение триггера в gtm

Для вашего случая вы должны сами определить правило/правила активации. Это довольно легко.
Т.к. мы потом будем добавлять ещё один сценарий, то мы еще и переименовали этот триггер (если вы обойдётесь одним сценарием, то это можно и не делать):
Custom – konamiCodeInitiated  —-> Main – konamiCodeInitiated

И сохраняем всё.

Как изменить текст надписей в сценарии

По умолчанию в сценарии прописаны такие текста (скриншот с нашего сайта с оригинальными текстами):

текста сценария gtm

Мы хотим их поменять. Для этого нужно зайти внутрь тега “cHTML – Rick Roll Konami Code” и поменять текст вот в этом блоке:

поменять текста в теге gtm

Вот там мы и прописали наши текста. Сделали не 2 текста, как было, а больше:

изменение текстов в gtm

Текста, кстати, специально такие написаны. На этом сделаем отдельное внимание в конце статьи.
Сохраняем изменения.

Тут мы проверили работу сценария и увидели, что довольно быстро меняются текста. Надо бы побольше задержку сделать. Для этого в этом же теге нужно изменить вот этот параметр:

интервал смены текста в gtm

Это сейчас мы уже прописали 2000 миллисекунд (2 секунды). Изначально там стояло значение в 1000. Теперь снова всё сохраняем и публикуем контейнер. Вот теперь это будет работать так, как вы это и видели :).

И как бы на этом снова можно было бы сказать – всё.
НО мы захотели добавить ещё один сценарий – другой – на все страницы уже именно блога.

Как добавить второй сценарий для других страниц
Заходим сюда и так же качаем контейнер.

Так же делаем импорт этого контейнера в текущую рабочую область. И вот здесь, т.к. мы уже ранее импортировали похожие настройки, необходимо выбрать опцию “Объединить —-> Переименовать…”:

импорт нового контейнера gtm

Жмём “Подтвердить”.
И вот теперь в списке тегов можно снова посмотреть, что же было добавлено. И увидеть там, что добавился один тег, который нам уже и не нужен (кликабельно):

описание новых тегов gtm

Поэтому можно смело снести тег “GA Event – Konami Code Initiated_import_1”.
Дальше нужно сделать так, чтобы этот сценарий работал только на страницах блога. Для этого нам вполне подойдёт логическое правило “URL содержит blog.affcontext.ru”.

В триггерах находим последний добавленный триггер “Custom – konamiCodeInitiated” и внутри него задаём такие настройки:

услоия триггера gtm для блога

Мы же еще и переименовали триггер в “Blog- konamiCodeInitiated”. Так будет понятнее.
Сохраняем, публикуем, и-и-и-и-и-и видим, что на главной странице сайта у нас срабатывает оба сценария ((.

Делаем озадаченное лицо:

интересно

Вот последний жест бровями – это как раз мысль пришла, почему же так происходит. Сейчас будет буквально пара секунд “погружения в работу GTM”.
У нас же есть тег, который “слушает нажатия клавиш” и в нужный момент времени отправляет в DataLayer событие “konamiCodeInitiated”:

событие после комбинации_клавиш

А оба наших сценария срабатывают как раз в тот момент, когда GTM ловит это событие “konamiCodeInitiated”. И неважно, что у нас разные триггеры ловят это событие. Событие то одинаково называется.

Значить, нам надо сделать отправку разных событий. На этом “погружение в GTM” закончено ;).

Чтобы это сделать, есть 2 варианта:
1) изменить сам js-код в теге прослушки нажатий и на разных страницах отправлять разные события в DataLayer
2) сделать копии тегов для разных событий на разных страницах

Более лаконичный и “красивый” вариант – первый. Но он требует дополнительных знаний JavaScript. Поэтому мы разберём более “простой” вариант с копиями (это мы так отмазались “мы не знаем, какой js код писать”).

Итак, для начала нужно создать 2 разных триггера, которые будут определять разные страницы сайта:

триггер сугубо сайт

триггер сугубо блог

Не будем долго останавливаться на том, как их создавать. Вы это уже должны уметь.
А затем в текущем теге “cHTML – Konami Code Listener” задать условие “срабатывать лишь на основном сайте”. Изначально там стоит условие “All Pages”.

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

тег с условием сугубо сайт

Для удобства еще и переименуем этот тег в “cHTML Main – Konami Code Listener”.
Потом делаем копию этого тега и у него в триггерах активации задаём “сугубо блог” + переименовываем тег:

как сделать копию тега

копия тега

Сохраняем всё.

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

один триггер активации gtm

А нужно указать наш второй созданный тоже. Просто добавить его:

второй триггер в gtm

Теперь уже финально всё сохраняем, публикуем, проверяем. Всё работает!

Всё работает как надо

И вот у нас получилось как обычно – хотели небольшой пост сделать, а вышло на дофига картинок :). Но только не думайте, что это реально сложно. Тут просто пошагово показано, как это реализовать. При наличии опыта все эти шаги можно сделать за 4 минуты. Серьёзно!

Это же GTM – мощнейший инструмент маркетолога. Мы вообще когда узнали о возможностях GTM, имели вот такое выражение лица:

впервые узнал о gtm

Кстати, советуем еще добавить позитива к себе в настроение и посмотреть гифки на тему “работа с GTM”. Они очень смешные и жизненные )).

А в конце хотелось бы отметить следующее:

———————

В наше время (весна 2017) довольно мало людей работают с GTM. И это среди маркетологов. Да даже многие разработчики НЕ работают с ним.
А сами заказчики – ооооо это беда.

Так вот здесь сейчас будет обращение к заказчикам
Вы поосторожнее с доступами к вашему GTM для каких-либо 3х лиц. А особенно опасно, если вам кто-то поставил GTM на сайт, но у вас даже нет доступа к нему.

А вы теперь знаете, что через GTM можно хорошо “шаманить” с вашим сайтом через JavaScript. Это просто момент безопасности вашего сайта и ваших данных. К слову сказать, мало кто даже из наших заказчиков знают про GTM. Но им повезло, т.к. они работают с нами, а мы же хорошие – пакостить не будем.

Только на 1е апреля, и то осторожно )).
Кстати, на это 1е апреля мы добавили один из сценариев на все наши проекты и отправили сообщение заказчикам в стиле “видели, что у вас творится на сайте?”

А потом мы выслали письмо с таким текстом (чего и вам советуем)


%ИмяКлиента%, день добрый
Сегодня мы показали вам, что можно сделать с вашим сайтом, имея доступ к т.н. Google Tag Manager, который установлен у вас на сайте (GTM). Это удобный инструмент для работы маркетолога, позволяющий работать с кодом сайта без вмешательство разработчика (за исключением сложных случаев). Это сильно ускоряет процесс работы, т.к. исключается время на реакцию со стороны людей, кто ответственен за работоспособность сайта.

Однако вы, как заказчик, должны и обязаны знать, что если этот доступ получит “злоумышленник”, то у него появляются вполне широкие возможности для работы с сайтом. И кто знает, как они это смогут использовать.

Поэтому данным нашим поступком мы хотели донести до вас следующие моменты:
– вы должны знать, что у вас на сайте стоит GTM и все рабочие коды ставятся нами (компанией AffContext) именно через GTM
– вы можете быть спокойны, пока этот доступ есть лишь у нас. Мы гарантируем 100% безопасность доступов к вашему GTM
– тем не менее, у вас лично должны быть доступы в GTM. У вас всегда должны быть доступы от таких важных вещей. Эти доступы мы высылаем в аттаче. Когда-нибудь в будущем они могут вам пригодится
– если в будущем так случится, что вы уже будете работать не с нами, то перед тем, как давать людям полные права на GTM, сначала вы можете дать права просто на чтение. И лишь потом, имея веру в вашего подрядчика, вы можете давать полные права на GTM. Делается это здесь:

доступ к gtm шаг 1

доступ к gtm шаг 2

Данные настройки дадут доступ лишь на “чтение” того, что у вас лежит внутри GTM.

Происходящее на сайте мы завтра же уберём. Никто, кроме вас, не знает заветную комбинацию клавиш для запуска.
Это всё, что мы хотели вам сообщить. Спасибо за внимание

Может, хоть так привлечём их внимание к безопасности их же данных :).

———————

На этом всё.

P.S. А если вы хотите создать свой собственный сценарий происходящего, то вам всё же придется перейти по оригинальной ссылке и прочитать внизу статьи, как это делается.

 

—————

Если вам понравились наши статьи и вы хотите получать свежие посты на свой e-mail, то просто подпишитесь на нашу рассылку. В левой панели в самом верху страницы (где ссылки и vk-виджет) есть кнопка «Подписаться«. Кликайте на неё!

Так же будем благодарны за репост данной статьи в соц.сетях. Сделано с трудом и любовью к делу.

Добавьте комментарий

Комментарии

  1. Порадовал прыгающий под музыку контент на нашем сайте)))

  2. Отличная статья! Молодцы

  3. Спасибо, Дмитрий