Кейс: Как я одним JS скриптом сайт поломал

JS ошибка на сайте

Расскажу один кейс, который случился со мной, когда я был еще новичком, и устанавливал отслеживание на сайте через GTM. Делалось это для более-менее крупного клиента из Германии, который торгует промышленным оборудованием. Сайт и бизнес довольно серьезные, но ошибка случилась глупая, и к счастью не привела к потерям.

JS через GTM

Если раньше вы использовали менеджер тегов, то знаете, что в нем можно создать тег «Custom HTML», в котором можно прописать любой код HTML, CSS, JS, что пожелаете. И таким образом быстро и легко внедрить дополнительный код на сайт. Именно этот тег и был использовал для замены ссылки на сайте с простой на ссылку с дополнительными параметрами для отслеживания. А если конкретнее, то использовалась функция innerHTML.

Почему именно она? — Она быстро была «нагуглена» и заработала как надо.

Так я еще не ошибался.

Что в результате?

В результате я получил рабочий скрипт, который быстро менял ссылку на нужную, делал все отлично. Но все оказалось не так просто. И узнал я об этом только после выходных, когда пожаловался клиент. Не работала кнопка «add to cart» ? (кнопка добавления товара в корзину). В принципе можно сказать, что это главная кнопка для Интернет магазина, и она не работала.. Но это не оказалось проблемой, так как на таких сайтах на выходных нет продаж вовсе (мы знаем это по аналитике), как и трафика в разы меньше, чем в будние дни.

Успешно отловив такую глупую ошибку я не использовал innerHTML в работе. Проблема была в том, что эта функция изменила DOM дерево HTML документа, но только делала это неправильно (насколько я понял это была особенность сайта), и вообще не рекомендуется для использования, если точно не понимаешь как она работает. Если вы опасаетесь JS ошибок на своем сайте, которые могу все сломать — вы можете отследить, если они показаны в консоли браузера — читайте про отслеживание JS ошибок.

В конце я могу порекомендовать вам быть более внимательным и читать документации к тому, что вы используете, и будьте бдительны! Спасибо за внимание!

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: