Измените HTML-контент с помощью JavaScript и Google Tag Manger
Я пытаюсь изменить часть содержимого 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>
Я проверил, срабатывает ли тег и все такое, и он срабатывает правильно (при запросе dc = 1), вот триггер:
Кто-нибудь знает, почему не стабильно работает? как я могу это исправить?
Нет. Это полезно: gtm.js? Id = GTM-NMC9HDC: 90 Uncaught {Hd: "Uncaught TypeError: $ is not a function -: 1"} Hd: "Uncaught TypeError: $ is not a function -: 1" прото: Объект | изображение: i.gyazo.com/513fba4a4a8615fdc9f45123e1102a09.png
Я думаю, это связано с jquery. Убедитесь, что он включен в правильную версию
Интересный факт - после нескольких тестов он работает на 100% в Firefox и только на 5-10% в Chrome.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 (которое будет использоваться в качестве триггера) при выполнении обоих условий.
Спасибо @Max, я запускаю скрипт JQuery с помощью GTM. Не в этом ли причина? Если да - как лучше всего запустить его, или мне следует реализовать его непосредственно на странице?
Наиболее распространенным шаблоном проектирования является синхронная загрузка основных библиотек (например, jQuery) из исходного кода (learn.jquery.com/about-jquery/how-jquery-works) именно для того, чтобы избежать таких состояний гонки, как у вас. Если вы все еще хотите загружать их через GTM (который будет асинхронным из-за природы GTM), решение состоит в том, чтобы отправлять события dataLayer при загрузке скриптов (я дал 1 решение, вот еще один stackoverflow.com/questions/12820953/…) и использовать эти события как триггеры для выполнения других задач (загрузка других файлов JS, использование jQuery и т. д.)
Я реализовал скрипт jQuery в исходном коде, и он решил проблему, спасибо;)
Причина, по которой он работает в Firefox, а не в Chrome, может быть результатом хвостовой функции, реализованной в Firefox с версии 57. Она задерживает загрузку сценариев отслеживания (до 6 секунд) до тех пор, пока не будут загружены другие сценарии. Вот почему jquery загружается перед вашим тегом, как указано Максом.
Вы проверили на наличие ошибок? в консоли например