Изменить содержание HTML с помощью JavaScript и Google Tag Manger

Question

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

Проблема в том, что он нестабилен, иногда он работает и показывает картинку, а иногда - без причины.

HTML

<style>#dc {display:none;}</style>
<img id="dc" class="alignleft wp-image-2685" src="/someImage.png" width="269" height="400" />

JavaScript

<script type="text/javascript">
     $(document).ready(function() {
            $('#dc').show();
        } 
       );
</script>

Вот тег в GTM:

Я проверил, запускается ли Tag и все, и работает ли он правильно (когда строка запроса dc = 1), вот триггер:

У кого-нибудь есть идеи, почему он не работает стабильно? как я могу это исправить?

Answer 1

Причина, по которой он работает в Firefox, а не в Chrome, может быть результатом функции хвостовой настройки, реализованной в Firefox начиная с версии 57. Она задерживает загрузку сценариев отслеживания (до 6 секунд) до тех пор, пока не загрузятся другие ваши сценарии. Вот почему jquery загружается перед вашим тегом, как упомянуто Максом.

Answer 2

Кажется, у вас есть условие гонки: тег GTM в некоторых случаях запускается до загрузки jQuery (отсюда ошибка $ is not a function, поскольку $ не существует во время выполнения тега, причина только в Chrome, а не в Firefox, в том, что не все браузеры ведут себя одинаково:)).

Что вы можете сделать, это вставить следующий скрипт в ваш код после jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  dataLayer = window.dataLayer || [];
  dataLayer.push({event: "jquery_loaded"});
</script>

Затем создайте триггер GTM, используя это пользовательское событие:

И замените триггер DOM Ready на этот.

Если вы участвуете в гонке на 2 условиях (загружен jQuery и динамически загружается некоторое содержимое), вы можете написать небольшой цикл с setInterval , который запускает событие GTM (которое будет использоваться в качестве триггера), когда оба условия соблюдены.