Подмена текста с помощью GTM — как быстро изменить контент на сайте > NetPeak - Независимость и осознанность
NetPeak Biz Tech    


Подмена текста с помощью GTM — как быстро изменить контент на сайте

Подмена текста с помощью GTM — как быстро изменить контент на сайте

< >

Иногда необходимо быстро внести изменения в текст на сайте, но сделать это через CMS невозможно. Нет доступа к админ-панели или не получается «достучаться» до программиста. А вам вот уже сейчас нужно рассказать клиентам на своем лендинге, что в рекламной кампании изменились условия. Например, цена или локация. Вероятнее всего, перед запуском рекламы вы подключили отслеживание Google аналитики через GTM (это было бы самым верным решением). В таком случае изменить текстовый контент можно с помощью Custom HTML тега Google Tag Manager.

Временное решение

Сразу отмечу, внедрение таких изменений через GTM — не лучшее решение и, скорее, временное.

GTM базируется на JavaScript. Механизмы индексации контента, внедренного с его помощью, не совсем понятны. JS индексируется исключительно в Google, а вот Яндекс индексировать такой контент не сможет.

Да и в Google, если использовать динамическую подмену с помощью GTM, страницы попросту могут не успевать пройти переиндексацию или не будут индексироваться вовсе.

Чтобы понять, почему так происходит, сравните процесс сканирования HTML и JavaScript сайтов:

HTML-сайты

Сайты на основе JavaScript

  1. Робот Googlebot загружает HTML-файл.
  2. Робот Googlebot извлекает ссылки из исходного кода и может посещать их одновременно.
  3. Робот Googlebot загружает файлы CSS.
  4. Робот Googlebot отправляет все загруженные ресурсы в индексатор Google (Caffeine).
  5. Индексатор (Caffeine) индексирует страницу.
  1. Робот Googlebot загружает HTML-файл.
  2. Робот Googlebot не находит ссылок в исходном коде, поскольку они вводятся только после выполнения JavaScript.
  3. Робот Googlebot загружает файлы CSS и JS.
  4. Робот Googlebot должен использовать службу веб-рендеринга Google (часть индексатора Caffeine) для анализа, компиляции и выполнения JavaScript.
  5. WRS (Web Rendering Services) извлекает данные из внешних API, из базы данных и т. д.
  6. Индексатор может индексировать контент.
  7. Google может обнаруживать новые ссылки и добавлять их в очередь сканирования робота Googlebot. В случае веб-сайта HTML — второй шаг.

Анализ, компиляция и запуск файлов JavaScript отнимают очень много времени — как для пользователей, так и для Google.

Когда сайт небольшой, шансов на индексацию больше, так как обработка и рендеринг займет меньше времени.

Если контент нужно поменять быстро и ненадолго, предлагаю вам следующий алгоритм.

Подмена текста с помощью Google Tag Manager

Скажем, есть сайт музыкальных инструментов. На одной из страниц нужно поменять описание в разделе «Акустические гитары».

  1. Для начала откройте панель разработчика на вкладке Elements и выберите элемент интересующего вас текста.

  1. Дальше скопируйте путь к тексту, выбрав «селектор CSS» или «путь JS». Лучше выбирать второй вариант, так как он сформирован сразу с query запросом. Он вам пригодится.

У меня получилось следующее:

document.querySelector(\"#categoryLinksSuggestions > p:nth-child(5)\")

Этот путь понадобится для пользовательского тега.

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

Проверить текст можно, прописав во вкладке Console тот же путь и добавив метод запроса .innerText. Он позволяет получить данные, записанные в найденном элементе.


Если вы скопировали не «JS путь», а «селектор CSS», у вас получится путь без запроса query:

#categoryLinksSuggestions > p:nth-child(5)

Тогда для проверки в консоли, его необходимо дополнить:

document.querySelector(\"#categoryLinksSuggestions > p:nth-child(5)\").innerText

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

 document.querySelector(\"#categoryLinksSuggestions > p:nth-child(5)\").textContent.replace(\\\'Гитара — один среди наиболее популярных музыкальных струнных инструментов. \\\',\\\'ЗАМЕНА ПЕРВОГО ПРЕДЛОЖЕНИЯ.\\\')

Вид на странице:

Если все верно, вы сможете увидеть текст с подмененным значением:

Также в Console можно проверить замену текста с помощью запроса .textContent.replace. Этот метод запроса в данном примере не играет важную роль, но его стоит запомнить. Ведь при активной работе с GTM он может стать очень полезным.


  1. Дальше нужно зайти в Google Tag Manager и создать новый тег Custom HTML.

Написать скрипт на замену текста.

<script>
(function () {
var replacementText = \"НАШ НОВЫЙ ТЕКСТ\"
JS ПУТЬ ИЗМЕНЯЕМОГО КОНТЕНТА.textContent = replacementText
})() ;
script>

Вот что я сделал:

  • объявил функцию JavaScript — комбинация «function()»;
  • var replacementText — объявил переменную на замену текста;
  • переменной var replacementText присвоил “НАШ НОВЫЙ ТЕКСТ”;
  • в свойстве textContent указал JS путь и запрос на замену текстового контента.

В моем примере выглядит вот так:

Вид в интерфейсе:

  1. Дальше необходимо настроить триггер и указать адрес страницы, где будет происходить замена.

Для этого нужен триггер загрузки страницы.

Я выбрал триггер DOM Ready, поскольку создаваемый пользовательский тег взаимодействует со структурой DOM после ее загрузки.

Вы также можете выбрать триггер Page View. Но он может сработать некорректно, все зависит от скорости формирования первичной загрузки сайта. И возможна ситуация, что вы будете пытаться задействовать элемент страницы, который еще не загрузился.

Поскольку нужно заменить текст только на одной странице, выбирайте «Некоторые элементы DOM готовы» и указывайте необходимый адрес страницы.

  1. Сохраните и проверьте.

Для этого выберите Preview (Предварительный просмотр) и смотрите отработку триггера. Если все правильно, сохраните и наблюдайте изменения на сайте.

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

Запомнить

Подмена текста с помощью Custom HTML тега Google Tag Manager даст вам возможность оперативно и самостоятельно внести небольшие изменения в контент на сайте.

Для этого нужно:

  • использовать вкладку Elements в панели разработчика;
  • выбрать нужный элемент текста и скопировать путь к нему с «селектор CSS»/«путь JS» (главное получить в итоге путь с запросом query) ;
  • создать новый тег Custom HTML в GTM и написать скрипт на замену текста;
  • настроить триггер и указать адрес страницы, где будет происходить замена.

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



Комментарии:

Как работать с Open Graph

Как работать с Open Graph Что нужно сделать, чтобы превью веб-страниц в социальных сетях стало магнитом для пользователей?...

15 07 2024 9:58:36

Контекстная реклама недвижимости на Кипре — в 5 раз больше лидов за 3 месяца

Контекстная реклама недвижимости на Кипре — в 5 раз больше лидов за 3 месяца Почему в высококонкурентных тематиках важно оптимизировать поведенческие показатели...

14 07 2024 4:38:23

Стратегия email-маркетинга: кому и зачем мы шлем письма

Стратегия email-маркетинга: кому и зачем мы шлем письма Старт любых активностей в сфере email-маркетинга — разработка стратегии...

13 07 2024 19:45:52

Facebook ***ytics — подробное руководство по настройке

Как работать с Facebook ***ytics — бесплатным инструментом с богатым инструментарием и лучшей из всех существующих решений интеграцией с платформой Facebook...

12 07 2024 22:29:50

О влиянии счастья на бизнес: как Zappos получил $1,2 млрд от Amazon за умение делать покупателей счастливыми

О влиянии счастья на бизнес: как Zappos получил $1,2 млрд от Amazon за умение делать покупателей счастливыми Клиенты возвращаются к хорошему сервису, который начинается с понятного интерфейса на сайте, продолжается в общении с вежливым сотрудником и заканчивается в общении с воспитанным курьером или менеджером в пункте самовывоза. Что ещё? Читайте!...

11 07 2024 13:22:13

Кейс по SEO-продвижению сайта в тематике грузовые перевозки — прирост конверсий в звонки в 4,41 раза

Кейс по SEO-продвижению сайта в тематике грузовые перевозки — прирост конверсий в звонки в 4,41 раза Кейс в тематике «грузоперевозки»: как быстрое внедрение доработок помогло привлечь качественный трафик на новый сайт...

10 07 2024 7:16:39

Кейс по продвижению интернет-магазина детской обуви: ROMI 135%

Кейс по продвижению интернет-магазина детской обуви: ROMI 135% Покажем, как продвигать сайты, продающие детскую обувь...

09 07 2024 5:17:47

12 функций таблиц Google для работы с семантикой

12 функций таблиц Google для работы с семантикой + таблица с примерами использования каждой функции....

08 07 2024 3:44:44

App Campaign for Engagement. Как работать с кампаниями на взаимодействие с приложением в Google Ads

Человек скачал ваше приложение, воспользовался им один раз и … забыл. Что с этим делать, читайте в Netpeak Journal....

07 07 2024 2:41:42

Кейс: как спасти проект и увеличить органический трафик на 109% за 6 месяцев

Кейс: как спасти проект и увеличить органический трафик на 109% за 6 месяцев Как улучшить видимость сайта после оптимизаторов-староверов — кейс в тематике «световое и звуковое оборудование»....

06 07 2024 9:25:22

Хакерская атака на постаматы: как человек становится заложником технологий

Хакерская атака на постаматы: как человек становится заложником технологий Хакерские атаки с развитием технологий коснулись постаматов и доставки заказов из интернет-магазинов...

05 07 2024 20:10:44

Как рекламировать недвижимость и анализировать статистику рекламных кампаний — кейсы Netpeak и Ringostat

Как рекламировать недвижимость и анализировать статистику рекламных кампаний — кейсы Netpeak и Ringostat Подборка для застройщиков, маркетологов и менеджеров по продажам...

04 07 2024 9:16:54

Как настроить A/B тест с помощью Google Optimize — пошаговый мануал

Как настроить A/B тест с помощью Google Optimize — пошаговый мануал Как настроить эксперимент на сайте без сторонней помощи...

03 07 2024 20:48:11

Путь магазина «Модна Каста» от Андрея Логвина

CEO магазина «Модна Каста» Андрей Логвин — сделал отличный доклад на 8P о пути к успеху своего бизнеса и будущем Ecommerce. Детальнее об ощущении deal и «первом дне» для интернета читайте в новом посте....

02 07 2024 22:33:21

Конкурент Shazam: искусственный интеллект распознает песни по насвистываниям и мычаниям

Конкурент Shazam: искусственный интеллект распознает песни по насвистываниям и мычаниям Как в Google Search можно найти мелодию по примерному напеву...

01 07 2024 7:56:11

Кейс: как провести анализ конкурентов с помощью SimilarWeb

Кейс: как провести анализ конкурентов с помощью SimilarWeb Определение, исследование и проверка конкурентов в Similarweb — первый шаг перед запуском и масштабированием проекта...

30 06 2024 5:16:54

RFM-анализ: три параметра для сверхточной сегментации базы email-рассылок

RFM-анализ: три параметра для сверхточной сегментации базы email-рассылок RFM — это аббревиатура слов Recency, Frequency, Money — новизна, частота, деньги. То есть считаем, как давно клиент купил товар в последний раз, сколько всего покупок он сделал и сколько денег принес нам за все время заказов....

29 06 2024 12:33:47

Microsoft Power BI в интернет-маркетинге — дайджест полезных публикаций

Microsoft Power BI в интернет-маркетинге — дайджест полезных публикаций Как связать данные, полученные из множества различных источников, и визуализировать их в виде удобных интеpaктивных отчетов...

28 06 2024 23:28:45

А вы убрали вредоносный контент? Или как быстро Google может понизить сайт в выдаче

А вы убрали вредоносный контент? Или как быстро Google может понизить сайт в выдаче До понижения в органической выдачи Гугл у сайта есть около 15 дней с момента появления сообщения о вредоносном контенте....

27 06 2024 19:43:59

Краткое пособие для новичков по типам рекламных кампаний в Google Ads

Краткое пособие для новичков по типам рекламных кампаний в Google Ads Google Adwords: типы рекламных кампаний и объявлений, тонкостях настройки... Все, о чем вы боялись спросить... Или не боялись, а просто не знали, о чем спрашивать....

26 06 2024 18:45:37

Как импортировать данные из Google ***ytics в Excel с помощью Excellent ***ytics — мануал для чайников

Как импортировать данные из Google ***ytics в Excel с помощью Excellent ***ytics — мануал для чайников Ексель для чайникiв. Как импортировать всю необходимую информацию из Google ***ytics с помощью простого интерфейса Excellent ***ytics....

25 06 2024 8:46:14

Продвинутый подход к работе с аудиториями Facebook

Продвинутый подход к работе с аудиториями Facebook В основе продвижения любых продуктов фигурирует ЦА и её потребности. Рассказываем, как с ней работать в разрезе Инстаграм и Facebook так, чтобы РК давала максимальный профит...

24 06 2024 21:19:55

Как орфографические ошибки могут повлиять на позиции сайта в выдаче?

Пост по мотивам видео Мэтта Каттса из Google. Из первых рук, как говорится....

23 06 2024 12:58:51

Свадьба в IT, или Как пиарщику доверить организацию самого важного ивента подрядчику

Свадьба в IT, или Как пиарщику доверить организацию самого важного ивента подрядчику Организаторам мероприятий, коллегам из PR-сферы и невестам о том, как делегировать важные мероприятия внешнему подрядчику...

22 06 2024 19:19:53

10 шагов к статистике на блюдечке. Инструкция по настройке «Подсказок» в Google ***ytics 4

10 шагов к статистике на блюдечке. Инструкция по настройке «Подсказок» в Google ***ytics 4 Как с помощью GA4 анализировать рекламные кампании, лежа на диване...

21 06 2024 15:44:54

Востребованные IT-профессии в Украине — все кроме программирования. Какие курсы выбрать в 2022 году

Востребованные IT-профессии в Украине — все кроме программирования. Какие курсы выбрать в 2022 году Рассказываем об интересных диджитал-специальностях и зарплатах, как обучиться этим профессиям с нуля (в том числе в зрелом возрасте) и можно ли работать удалённо....

20 06 2024 15:38:10

Как работать с Excel в рекламной кампании — дайджест публикаций Алексея Селезнева

Дайджест-путеводитель по серии постов о работе с редакторами электронных таблиц для PPC-специалистов....

19 06 2024 12:46:50

MEGOGO, Google, Фокстрот и AIR Brands — как бренды создают эффективный видеоконтент

MEGOGO, Google, Фокстрот и AIR Brands — как бренды создают эффективный видеоконтент Бренды поделились инсайтами на ДиВи Конф — фишки от MEGOGO, Google, TikTok, Banda, McCann, I am IDEA, AIR Brands, Rocket и Фокстрот...

18 06 2024 16:52:38

Как стать контент-маркетологом в Netpeak Group

О работе внутреннего и внешнего контент-маркетолога: необходимые знания и навыки для старта, плюшки и головная боль. Все здесь....

17 06 2024 21:23:20

Google BigQuery — зачем нужна облачная база данных

Google BigQuery — зачем нужна облачная база данных Как бесплатно пользоваться преимуществами, особенностями и дополнительными инструментами сервиса...

16 06 2024 15:24:36

Портрет SEO-специалиста 2019: результаты опроса Serpstat

Профессиональный уровень SEO-специалиста в штатных комaндах редко определяется конкретной категорией (Junior, Midle, Senior). Но большинство считает себя мидлами. Узнать больше!...

15 06 2024 0:46:19

11 функций Google Таблиц в помощь SEO-специалистам

11 функций Google Таблиц в помощь SEO-специалистам Нужно разбить ячейку или составить график? Если вы знаете функции, таблицы гугл могут пpaктически заменить отдельные сервисы или дополнения...

14 06 2024 23:34:46

Анонимный покупатель на страже роста продаж — опыт агентства Netpeak

Анонимный покупатель на страже роста продаж — опыт агентства Netpeak И эксперт, и агент. Анонимный покупатель — специальная проверка бизнес-процессов до и во время рекламной кампании...

13 06 2024 10:25:10

7 частых и неочевидных ошибок интернет-магазинов

7 частых и неочевидных ошибок интернет-магазинов Расскажем про ошибки интернет-магазинов, которые трудно найти соответствующими программами и сервисами проверки...

12 06 2024 0:47:32

Лучшие программы для исправления орфографических ошибок

Лучшие программы для исправления орфографических ошибок Исправление ошибок в тексте возможно с помощью онлайн-инструментов и стационарных программ...

11 06 2024 14:57:22

Как создать динамическое поисковое объявление в Google Рекламе

Как создать динамическое поисковое объявление в Google Рекламе Шаблон по настройке и оптимизации динамических поисковых объявлений...

10 06 2024 23:58:46

Скорость загрузки сайта - как проверить и отслеживать метрики скорости загрузки и Web Vitals

Скорость загрузки сайта - как проверить и отслеживать метрики скорости загрузки и Web Vitals Всё о метриках загрузки сайта. Как проверить и отслеживать реальную скорость загрузки сайта и почему нельзя доверять показателям Pagespeed Insights....

09 06 2024 5:28:36

Как делать вирусный контент без лишнего текста — правила жизни Coub

Как делать вирусный контент без лишнего текста — правила жизни Coub Пользователи могут смотреть вирусные ролики без единого слова...

08 06 2024 19:19:34

Once upon a time… 22 правила сторителлинга от Pixar

Как рассказывать истории...

07 06 2024 22:19:16

Кто есть кто в комaнде проекта?

Кто есть кто в комaнде проекта? Всё, что нужно знать заказчикам услуг о внутренней кухне PM-специалистов...

06 06 2024 8:40:37

Как проводить ежедневные встречи в режиме WFH — чек-лист Netpeak

Дейли — ежедневный комaндный митинг, на котором комaнда синхронизируется по ключевым моментам работы и по текущим задачам. Делимся чек-листом агентства Netpeak по организации дейли на удалёнке....

05 06 2024 1:59:41

Бесплатные обратные звонки — модель freemium в действии

Бесплатные обратные звонки — модель freemium в действии Бесплатные продукты для онлайн-бизнеса — история внедрения freemium модели в сфере виджетов обратных звонков....

04 06 2024 23:55:43

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

От того, что такое оффер до лучших стратегий и избежания ошибок...

03 06 2024 12:37:30

CEO of Ringostat Александр Максименюк: кому и зачем нужен Call Tracking

CEO of Ringostat Александр Максименюк: кому и зачем нужен Call Tracking 79% владельцев смартфонов, если верить Google, используют их для покупок или заказов услуг. Это более двух миллиардов человек. Ничего удивительного, что даже Google запустил собственный сервис Call Tracking. Кому и зачем жизненно важно отслеживать звонки...

02 06 2024 11:53:44

Как объединить источники данных в Google Data Studio

Как объединить источники данных в Google Data Studio Как пользоваться «Совмещением данных» с учетом всех особенностей инструмента...

01 06 2024 13:34:26

Корпоративная культура Blizzard: как выглядит офис гeйм-гиганта и зачем сотрудникам дарят мечи и перстни

Как Blizzard реализует тимбилдинг, мотивирует сотрудников и превращает офис в музей...

31 05 2024 21:17:46

Как поменялись рекламные кампании во время карантина — что делать бизнесу

Как поменялись рекламные кампании во время карантина — что делать бизнесу Инсайты от специалистов агентства Netpeak о популярных тематиках, тенденциях, особенностях продвижения в карантин и кризис, новых правилах для контекстной рекламы и других способов продвижения. Чтобы узнать больше, читайте далее!...

30 05 2024 0:55:58

Продвижение мобильного приложения: как вовлечь пользователей с помощью рекламы в Facebook?

Реклама Facebook для вовлечения пользователей помогает привлечь внимание к приложению и удержать пользователей в условиях перенасыщенного рынка....

29 05 2024 16:51:25

Кейсы: как отзывы о товарах увеличили конверсию интернет-магазина на 14% и трафик на 200%

Кейсы: как отзывы о товарах увеличили конверсию интернет-магазина на 14% и трафик на 200% Наличие или отсутствие в карточках отзывов о товарах интернет магазина сказывается на продажах, а также оказывает влияние на SEO. Об этом, а также о пользе автоматизированного сбора отзывов о товарах мы расскажем в этой статье....

28 05 2024 0:35:53

Как делать картинки для соцсетей в Canva

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

27 05 2024 16:20:14

Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::