Загрузка ресурсов: onload и onerror
Браузер позволяет отслеживать загрузку сторонних ресурсов: скриптов, ифреймов, изображений и др.
Для этого существуют два события:
- load – успешная загрузка,
- error – во время загрузки произошла ошибка.
Загрузка скриптов
Допустим, нам нужно загрузить сторонний скрипт и вызвать функцию, которая объявлена в этом скрипте.
Мы можем загрузить этот скрипт динамически:
let script = document.createElement('script'); script.src = "my.js"; document.head.append(script);…Но как нам вызвать функцию, которая объявлена внутри того скрипта? Нам нужно подождать, пока скрипт загрузится, и только потом мы можем её вызвать.
На заметку:
Для наших собственных скриптов мы можем использовать JavaScript-модули, но они не слишком широко распространены в сторонних библиотеках.
script.onload
Главный помощник – это событие load . Оно срабатывает после того, как скрипт был загружен и выполнен.
let script = document.createElement('script'); // мы можем загрузить любой скрипт с любого домена script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js" document.head.append(script); script.onload = function() < // в скрипте создаётся вспомогательная переменная с именем "_" alert(_.VERSION); // отображает версию библиотеки >;Таким образом, в обработчике onload мы можем использовать переменные, вызывать функции и т.д., которые предоставляет нам сторонний скрипт.
…А что если во время загрузки произошла ошибка? Например, такого скрипта нет (ошибка 404), или сервер был недоступен.
script.onerror
Ошибки, которые возникают во время загрузки скрипта, могут быть отслежены с помощью события error .
Например, давайте запросим скрипт, которого не существует:
let script = document.createElement('script'); script.src = "https://example.com/404.js"; // такого файла не существует document.head.append(script); script.onerror = function() < alert("Ошибка загрузки " + this.src); // Ошибка загрузки https://example.com/404.js >;Обратите внимание, что мы не можем получить описание HTTP-ошибки. Мы не знаем, была ли это ошибка 404 или 500, или какая-то другая. Знаем только, что во время загрузки произошла ошибка.
Обработчики onload / onerror отслеживают только сам процесс загрузки.
Ошибки обработки и выполнения загруженного скрипта ими не отслеживаются. Чтобы «поймать» ошибки в скрипте, нужно воспользоваться глобальным обработчиком window.onerror .
Другие ресурсы
События load и error также срабатывают и для других ресурсов, а вообще, для любых ресурсов, у которых есть внешний src .
let img = document.createElement('img'); img.src = "https://js.cx/clipart/train.gif"; // (*) img.onload = function() < alert(`Изображение загружено, размеры $x$`); >; img.onerror = function() < alert("Ошибка во время загрузки изображения"); >;Однако есть некоторые особенности:
- Большинство ресурсов начинают загружаться после их добавления в документ. За исключением тега
. Изображения начинают загружаться, когда получают src (*) .
- Для событие load срабатывает по окончании загрузки как в случае успеха, так и в случае ошибки.
Такое поведение сложилось по историческим причинам.
Ошибка в скрипте с другого источника
Есть правило: скрипты с одного сайта не могут получить доступ к содержимому другого сайта. Например, скрипт с https://facebook.com не может прочитать почту пользователя на https://gmail.com .
Или, если быть более точным, один источник (домен/порт/протокол) не может получить доступ к содержимому с другого источника. Даже поддомен или просто другой порт будут считаться разными источниками, не имеющими доступа друг к другу.
Это правило также касается ресурсов с других доменов.
Если мы используем скрипт с другого домена, и в нем имеется ошибка, мы не сможем узнать детали этой ошибки.
Для примера давайте возьмём мини-скрипт error.js , который состоит из одного-единственного вызова функции, которой не существует:
// �� error.js noSuchFunction();Теперь загрузим этот скрипт с того же сайта, на котором он лежит:
Мы видим нормальный отчёт об ошибке:
Uncaught ReferenceError: noSuchFunction is not defined https://javascript.info/article/onload-onerror/crossorigin/error.js, 1:1А теперь загрузим этот же скрипт с другого домена:
Script error. , 0:0Детали отчёта могут варьироваться в зависимости от браузера, но основная идея остаётся неизменной: любая информация о внутреннем устройстве скрипта, включая стек ошибки, спрятана. Именно потому, что скрипт загружен с другого домена.
Зачем нам могут быть нужны детали ошибки?
Существует много сервисов (и мы можем сделать наш собственный), которые обрабатывают глобальные ошибки при помощи window.onerror , сохраняют отчёт о них и предоставляют доступ к этому отчёту для анализа. Это здорово, потому что мы можем увидеть реальные ошибки, которые случились у наших пользователей. Но если скрипт – с другого домена, то информации об ошибках в нём почти нет, как мы только что видели.
Похожая кросс-доменная политика (CORS) внедрена и в отношении других ресурсов.
Чтобы разрешить кросс-доменный доступ, нам нужно поставить тегу атрибут crossorigin , и, кроме того, удалённый сервер должен поставить специальные заголовки.
Существует три уровня кросс-доменного доступа:
- Атрибут crossorigin отсутствует – доступ запрещён.
- crossorigin=»anonymous» – доступ разрешён, если сервер отвечает с заголовком Access-Control-Allow-Origin со значениями * или наш домен. Браузер не отправляет авторизационную информацию и куки на удалённый сервер.
- crossorigin=»use-credentials» – доступ разрешён, если сервер отвечает с заголовками Access-Control-Allow-Origin со значением наш домен и Access-Control-Allow-Credentials: true . Браузер отправляет авторизационную информацию и куки на удалённый сервер.
На заметку:
Почитать больше о кросс-доменных доступах вы можете в главе Fetch: запросы на другие сайты. Там описан метод fetch для сетевых запросов, но политика там точно такая же.
Такое понятие как «куки» (cookies) не рассматривается в текущей главе, но вы можете почитать о них в главе Куки, document.cookie.
В нашем случае атрибут crossorigin отсутствовал. Поэтому кросс-доменный доступ был запрещён. Давайте добавим его.
Мы можем выбрать «anonymous» (куки не отправляются, требуется один серверный заголовок) или «use-credentials» (куки отправляются, требуются два серверных заголовка) в качестве значения атрибута.
Если куки нас не волнуют, тогда смело выбираем «anonymous» :
Теперь при условии, что сервер предоставил заголовок Access-Control-Allow-Origin , всё хорошо. У нас есть полный отчёт по ошибкам.
Итого
Изображения , внешние стили, скрипты и другие ресурсы предоставляют события load и error для отслеживания загрузки:
- load срабатывает при успешной загрузке,
- error срабатывает при ошибке загрузки.
Единственное исключение – это : по историческим причинам срабатывает всегда load вне зависимости от того, как завершилась загрузка, даже если страница не была найдена.
Событие readystatechange также работает для ресурсов, но используется редко, потому что события load/error проще в использовании.
Задачи
Загрузите изображения с колбэком
важность: 4
Обычно изображения начинают загружаться в момент их создания. Когда мы добавляем на страницу, пользователь не увидит его тут же. Браузер сначала должен его загрузить.
Чтобы показать изображение сразу, мы можем создать его «заранее»:
let img = document.createElement('img'); img.src = 'my.jpg';Браузер начнёт загружать изображение и положит его в кеш. Позже, когда такое же изображение появится в документе (не важно как), оно будет показано мгновенно.
Создайте функцию preloadImages(sources, callback) , которая загружает все изображения из массива sources и, когда все они будут загружены, вызывает callback .
В данном примере будет показан alert после загрузки всех изображений.
function loaded() < alert("Изображения загружены") >preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);В случае ошибки функция должна считать изображение «загруженным».
Другими словами, callback выполняется в том случае, когда все изображения либо загружены, либо в процессе их загрузки возникла ошибка.
Такая функция полезна, например, когда нам нужно показать галерею с маленькими скролящимися изображениями, и мы хотим быть уверены, что все из них загружены.
В песочнице подготовлены ссылки к тестовым изображениям, а также код для проверки их загрузки. Код должен выводить 300 .
- Создадим img для каждого ресурса.
- Добавим обработчики onload/onerror для каждого изображения.
- Увеличиваем счётчик при срабатывании onload или onerror .
- Когда значение счётчика равно количеству ресурсов – тогда вызываем callback() .
Код счетчика Метрики — в переменную. Возможно ли?
Я хочу отложить загрузку счетчика Метрики до момента, когда пользователь начнет скроллить страницу. Я хотела бы использовать что-то такое:
window.addEventListener('scroll', function () < if (scl === false) < scl = true; setTimeout(function() < $("#ym").innerHTML = 'тут код счетчика '; >, 1000); > >); Такой вариант с innerНTML, конечно, не позволит мне записать в блок #ym код счетчика метрики. Есть ли способ это сделать? Может быть, импортом из другого файла? Или еще как-то? Мне пока не осилить такую задачу самой. Заранее спасибо за помощь! Код счетчика такой:
Теги в Google Tag Manager
Тег в Google Tag Manager – это фрагмент JavaScript кода, который собирает данные о посетителях на сайте и в приложении, а затем пересылает их на сторонние сервисы — Google Analytics, Google AdWords, Facebook, Яндекс.Метрика и т.д.
Если вы не используете Google Tag Manager, то все фрагменты кода других сервисов вам приходится вставлять вручную в исходный код страницы сайта. Это не очень удобно и отнимает много времени. Благодаря GTM все становится куда проще — исходный код менять не требуется, достаточно лишь указать в интерфейсе, какие теги вы хотите использовать и когда их нужно активировать.
В Google Tag Manager есть n-ое количество шаблонов тегов, которые облегчают их установку на сайте. Они разделены на категории:
- рекомендуемые – Universal Analytics, классический Google Analytics, отслеживание конверсий AdWords, ремаркетинг AdWords, счетчик DoubleClick Floodlight, тег продаж DoubleClick Floodlight, Google Optimize, Google Опросы;
- специальные – пользовательский HTML и пользовательское изображение;
- еще – сторонние сервисы, Twitter Universal Website Tag, Adometry, Crazy Egg, comScore Unified Digital Measurement, K50 tracking tag, Foxmetrics, Hotjar Tracking Code и другие.
Теги сторонних сервисов
Разберем предметно первые две категории. Шаблоны, поддерживаемые в диспетчере тегов Google (последняя категория «еще»), можно посмотреть в официальной справке Google.
Чтобы создать тег в Google Tag Manager, перейдите на вкладку меню «Теги» и нажмите кнопку «Создать».
В появившемся окне нажмите на пустое пространство конфигурации тега и выберите его тип.
Выбор конфигурации тега
Рекомендуемые теги
Как правило, большинство маркетологов и веб-аналитиков работает с первыми четырьмя рекомендуемыми тегами: Universal Analytics, Классический Google Analytics, Отслеживание конверсий Google AdWords и Ремаркетинг AdWords. В зависимости от решаемых задач могут использоваться и другие.
Классический Google Analytics является устаревшей версией Universal Analytics. Однако он по-прежнему установлен на различных сайтах в интернете и официально поддерживается Google. На смену классическому пришел UA (Universal Analytics, 2012 год), в который привнесли ряд изменений:
- процесс сбора данных (у классического GA было 5 разных cookies, у UA – 1, ClientID);
- в UA добавили новый протокол передачи статистических данных, который называется Measurement Protocol;
- пользовательские определения (параметры и показатели) пришли на смену пользовательским переменным (раньше для создания было доступно 5 метрик, то теперь их количество увеличилось до 20);
- в UA добавили расширенную электронную торговлю;
- в UA добавили функцию UserID, которая позволяет связывать разные устройства и объединять различные сеансы и действия во время этих сеансов с уникальным идентификатором. Это отслеживание еще называют кросс-девайсным.
- и т.д.
Создадим тег «Universal Analytics» и разберем его настройки:
Тип тега – Universal Analytics
В зависимости от выбранного в теге типа отслеживания дополнительные поля настроек будут меняться:
Сравнение полей настроек в зависимости от типа отслеживания
Для простого отслеживания Universal Analytics необходимо добавить один тег и выбрать тип отслеживания «Просмотр страницы». Если же вас интересуют события или транзакции электронной торговли, потребуется добавить и другие теги.
Тип отслеживания – «Просмотр страницы» (Page View)
Выбирается в том случае, когда вас интересует, какие страницы просматривают посетители на вашем сайте.
Для того, чтобы информация из GTM передавалась в Google Analytics, необходимо в тег добавить идентификатор отслеживания GA. Сделать это можно несколькими способами:
- указать переменную в опцию «Настройки Google Analytics»;
При такой настройке следует добавить идентификатор отслеживания Google Analytics (например, UA-113446186-1) в пользовательскую переменную типа «Настройки Google Analytics», предварительно создав ее.
Настройки Google Analytics
При клике на значок «i» откроется окно с заданной переменной, в которой можно оперативно поменять настройки.
поставить галочку «Включить переопределение настроек в этом теге» и вручную добавить идентификатор отслеживания Google Analytics, или же используйте пользовательскую переменную типа «Константа».
Включить переопределение настроек в этом теге
При активации данного способа у тега появляются дополнительные поля переопределения настроек, в которых мы можем изменять настройки счетчика Google Analytics через интерфейс Google Tag Manager. Она служит для настройки конфигураций Google Analytics, общих для нескольких тегов. Когда вы создаете тег Google Analytics с помощью Universal Analytics, Диспетчер предложит вам выбрать или создать переменную настроек Google Analytics. Большинство пользователей начнут работу с переменной настроек, содержащей только идентификатор отслеживания Google Analytics. Эту переменную можно будет использовать в любых дополнительных конфигурациях тегов с тем же идентификатором отслеживания Google Analytics (при этом вам не понадобится повторно его указывать).
- Поля, которые необходимо задать – доступен раскрывающийся список с полями, в которых задаются пара «ключ=значение»;
Поля, которые необходимо задать
Например, вы можете добавить поле для кроссплатформенного отслеживания (функция User ID) или для отслеживания поддоменов. При настройке электронной коммерции в Fields to Set также можно передавать значения по товарам – идентификатор (ecomm_prodid), тип страницы (ecomm_pagetype) или общую ценность товаров (ecomm_totalvalue), а также многое другое.
- Специальные параметры;
- Специальные показатели;
- Группы контента;
- Реклама – «Включить функции для контекстно-медийной сети»;
Если вас интересуют отчеты по демографии и интересам, ремаркетинг Google Analytics и интеграция с DoubleClick Campaign Manager (DCM), задайте значение «True». Включить эту функцию можно непосредственно через сам Google Analytics (на уровне ресурса «Отслеживание – Сбор данных – Ремаркетинг «Вкл.»)
Включение ремаркетинга и функций отчетов по рекламе в GA
- Электронная торговля — Включить расширенные функции электронной торговли;
При значении «True» вы сможете узнавать, когда пользователи добавляли товары в корзину, переходили к оформлению покупки и завершали ее, а также какие сегменты покупателей не совершают заказ. В Google Analytics настройка задается на уровне представления в разделе «Настройки электронной торговли».
Включение отслеживание электронной торговли
Примечание: просто включив эту настройку, данные по электронной коммерции передаваться не будут. Настройка Enhanced Ecommerce куда более сложный процесс и требует определенного времени и навыков.
Для корректного сбора данных можно настроить междоменное отслеживание. Тогда сеанс с переходом между вашими разными сайтами, например, domain.com, domain.ru, domain.org, будет засчитан как один сеанс, а время сеанса будет определено как общее время пребывания на всех посещенных ресурсах.
Автоматическое связывание доменов. Перечислите через запятую домены, для которых следует использовать общий идентификатор клиента, либо же создайте переменную типа «Константа» и задайте все домены там;
Использовать в качестве разделителя решетку. Позволяет использовать решетку (#) вместо знака вопроса (?) для добавления значений cookie в URL;
Изменение внешнего вида форм. Позволяет добавить информацию отслеживания к действию с формой.
- Расширенная конфигурация, в которой можно задать глобальную функцию, использовать отладочную версию и улучшенную атрибуцию ссылок. Настройки в этой категории используются крайне редко и предназначены для опытных пользователей.
Название глобальной функции. Позволяет переименовать глобальную функцию, используемую тегом Universal Analytics.
В некоторых случаях при добавлении элементов библиотеки analytics.js на страницу переменная ga может быть уже занята. Эту проблему можно решить путем переименования глобального объекта ga. Например, чтобы переименовать объект ga в analytics, нужно изменить код отслеживания следующим образом:
Изменение переменной ga в коде отслеживания Google Analytics
Подробнее о переименовании глобальной функции (объектов ga) читайте в официальной справке разработчиков Google.
Использовать отладочную версию. Этот вариант библиотеки analytics.js при выполнении создает подробные записи в консоли JavaScript.
Они содержат сведения об успешно выполненных командах, а также предупреждения и сообщения об ошибках в коде отслеживания. Кроме того, с их помощью можно получить подробную информацию о каждом обращении, отправленном в Google Analytics. Это позволит проверить, какие именно данные отслеживаются.
Чтобы включить отладочную версию библиотеки analytics.js, измените URL в коде отслеживания JavaScript с
Включение отладочной версии через код отслеживания GA
Включение улучшенной атрибуции ссылок. Позволяет повысить точность отчета «Статистика страницы». Когда страница содержит несколько ссылок на один URL, к каждой ссылке добавляется уникальный идентификатор элемента.
В Google Analytics эта функция находится на уровне ресурса в разделе «Настройки ресурса».
Использование улучшенной атрибуции ссылок в Google Analytics
Задать имя трекера. Позволяет присвоить название объекту трекера. Не рекомендуется использовать в GTM, так как указав уже существующее имя трекера, это может привести к искажению данных. Хотя присвоение имени позволяет согласовать работу трекеров, созданных в Google Tag Manager с уже существующим кодом Google Analytics, вместо этого лучше перейти на dataLayer.
С помощью функции переопределения можно сделать так, чтобы тег Google Analytics использовал все те же настройки, которые были заданы в переменной настроек Google Analytics, но данные передавались на другой идентификатор отслеживания.
Подробнее о том, какие теги Google Analytics и дополнительные настройки поддерживает GTM, читайте в официальной справке Google.
Расширенные настройки
Приоритет активации тегов — целое число (положительное или отрицательное), определяющее порядок запуска тегов. Чем больше данное число, тем раньше будет активирован тег при истинности одного из триггеров, связанных с данным тегом. По умолчанию значение «0», и все теги начинают выполняться одновременно независимо от того, закончилось ли выполнение предыдущего тега. Например, тег с приоритетом «3» будет запускаться до тегов с приоритетами 1 и 2.
Приоритет активации тегов
Включить специальное расписание активации тега. Если вы знаете, что некоторый тег понадобится вам на сайте в определенный период времени (например, при проведении рекламной акции вы отслеживаете определенные действия пользователей на сайте) просто активируйте данную настройку. Вы можете задать дату начала (время начала) и дату окончания (время окончания). Также дополнительно необходимо указать часовой пояс. Дата и время окончания не могут предшествовать дате и времени начала.
Включение специального расписания активации тега
Активировать этот тег только в опубликованных контейнерах. Настройка позволяет исключать запуск тегов в определенных ситуациях, например, в режиме предварительного просмотра.
Активировать тег только в опубликованных контейнерах
Когда вы находитесь в режиме отладки, как правило, вы контейнер не опубликовывайте до тех пор, пока не убедитесь в корректности работы всех настроек. При активации данной настройки тег не будет активироваться, поскольку он не опубликован. Чтобы результаты тестирования были более точными, не включайте эту функцию.
Настройки активации тега
Настройки активации тега
Без ограничений. Тег активируется при каждом срабатывании триггера. Этот вариант используется, только если задан порядок активации тегов.
Один раз на событие (указывается по умолчанию). Тег активируется только один раз при выполнении определенного события. Этот вариант полезен для передачи информации на уровень данных. Информация передается один раз, поэтому и тег срабатывает один раз.
Один раз на страницу. Тег активируется один раз при загрузке страницы. Этот вариант применяется, когда необходимо активировать какой-то пользовательский скрипт JS, который мы подгрузили на страницу с помощью пользовательского HTML-тега.
Например, активации тега «Один раз на страницу» полезна, когда мы хотим отследить прокрутку страницы. Пользователь дошел до какого определенного элемента один раз, и мы это действие отследили. При последующих прокрутах туда-сюда нам уже это не так важно.
Порядок активации тегов
Порядок активации тегов
В Google Tag Manager есть возможность задать тег, который будет активирован перед текущим тегом и тег, который будет активирован после выполнения текущего тега.
После выбора тега у нас появляется настройка, которая позволяет указать параметр.
Порядок активации тегов
Если вы выбираем активировать тег перед текущим, то мы можем указать, что данный тег, в котором мы сейчас находимся не должен быть активирован, если тег, который задан перед ним, приостановлен или не сработал.
Если мы выбираем тег, который должен быть активирован после данного тега, в котором мы сейчас находим и выполняем настройку, то поставив галочку мы указываем, что тег, который выбран из списка, не должен быть активирован, если тег, в котором мы сейчас находимся, приостановлен или не сработал.
В качестве простого примера разберем:
1. клик по кнопке «Подобрать букет» на сайте;
Пример отслеживания клика по кнопке
2. вывод с помощью пользовательского HTML-тега сообщения в консоли браузера «Hello, World». Конструкция имеет такой вид:
Вывод сообщения с помощью пользовательского HTML-тега
В качестве порядка активации тегов зададим следующие значения:
- в теге – «Подобрать букет» активируем настройку запуска тега перед текущим, выбрав наш пользовательский HTML-тег «Сообщение Hello, World»
Активация тега перед Тег – Подобрать букет
Таким образом, у нас сообщение в консоли «Hello, World» должно появиться до активации тега клика по кнопке «Подобрать букет».
У тега «Сообщение Hello, World» не заданы триггеры для активации, но есть информация о том, что данный тег будет активироваться непосредственно перед тегом «Подобрать букет».
Активация тега перед другими тегами
Перейдя в режим отладки Google Tag Manager и кликнув по кнопку, мы увидим, что по событию gtm.click активировалось два тега, несмотря на то, что у нас в настройках задан только один тег – это «Подобрать букет».
Пример активации тегов
Данные теги связаны между собой последовательностью активации. Аналогичным образом настраивается порядок активации «ПОСЛЕ».
Разберем другие типы отслеживания.
Тип отслеживания – Событие
В этом типе отслеживания задаются значения, которые использовались при настройке событий в Google Analytics.
Тип отслеживания — Событие
Опция «Не взаимодействие». Если вы хотите, чтобы отправка события влияла на ваш показатель отказов, то необходимо установить значение «False» для этого параметра. В противном случае – устанавливайте значение «True».
Опция «Не взаимодействие»
Все остальные настройки идентичны вышеописанным в типе отслеживания «Просмотр страницы».
Тип отслеживания – Транзакция
После того, как будет настроена передача данных о покупке, необходимо настроить тег, который будет передавать данные о транзакции в Google Analytics. Для этого и используется тип отслеживания – Транзакция.
Важно: включение отслеживания электронной торговли и создание тега с данным типом не позволит вам отслеживать данные о покупках пользователей. Для того, чтобы Google Tag Manager начал передавать сведения в Google Analytics обо всех транзакциях (идентификаторе товара, стоимости товара, наименовании и т.д.), необходимо использовать уровень данных (dataLayer), а также определенную конструкцию для передачи соответствующих параметров.
Тип отслеживания – Социальные сети
С помощью данного типа можно отслеживать социальные взаимодействия пользователей с сайтом, например, лайки/репосты Facebook, Vk, Twitter и т.д.
Тип отслеживания – Время
Отслеживание событий, срабатывающих по таймеру, может использоваться, если у вас есть страница (например, для просмотра видео), на которой пользователи могут долго оставаться, не запуская событий. Поскольку сеансы Google Analytics по умолчанию прекращаются через 30 минут, вам может понадобиться реализовать пользовательское событие, чтобы активность возобновлялась через какой-то другой промежуток времени.
Как правило, тип отслеживания «Время» в GTM используется в связке с триггером «Таймер», а для передачи данных в Google Analytics задаются параметры отслеживания пользовательского времени: переменная, категория, значение, ярлык.
Тип отслеживания – Внешний вид ссылки
Данный тип предназначен для отслеживания исходящих/внешних ссылок, то есть выходов (ухода) пользователей с сайта или загрузку файлов на странице (брошюр, прайс-листов, купонов и т.д.).
В качестве дополнительной настройки доступен параметр внешнего вида ссылки # (решетки) в качестве разделителя.
Параметры внешнего вида ссылки
Тип отслеживания – Изменить внешний вид формы
Этот тип отслеживания позволяет добавить информацию отслеживания к действию с формой. Например, чтобы отслеживать формы по доменам, информация об отслеживании должна быть добавлена к URL-адресу назначения формы при отправке формы. URL-адрес назначения формы — это URL-адрес в атрибуте действия формы:
Отсюда URL-адрес назначения формы называют действием с формой, а добавление информации отслеживания к действию с формой называют изменением внешнего вида формы.
В качестве дополнительной настройки также доступен параметр внешнего вида ссылки # (решетки) в качестве разделителя.
Отслеживание конверсий AdWords
Рекомендуемый тег в Google Tag Manager предназначен для отслеживания действий пользователя на сайте и передачи информации в Google AdWords. Например, когда пользователь оформляет заказ на сайте, подписывается на рассылку, звонит в вашу компанию, скачивает приложение и т.д. Все эти действия называются конверсиями.
После создания конверсии в AdWords необходимо настроить тег.
Отслеживание конверсий AdWords
Добавляем в тег «Отслеживание конверсий AdWords»:
- Идентификатор конверсии (Conversion ID);
- Ярлык конверсии.
Остальные значения заполнять не обязательно.
По умолчанию в опциях «Связывание конверсий» включено связывание конверсий (true) и задан префикс файла cookie _gcl.
На втором этапе нужно добавить тег связывания конверсий и настроить его так, чтобы он активировался на всех страницах сайта.
Тег «Связывание конверсий»
Тег «Связывание конверсий»
При нажатии на объявление URL целевой страницы обычно содержит информацию об этом клике. Когда посетитель выполняет нужное вам действие (например, активируя тег отслеживания конверсий AdWords), эта информация используется для связывания произошедшей конверсии с кликом, который привел пользователя на сайт.
Тег связывания конверсий автоматически считывает информацию о клике из URL целевой страницы и сохраняет эти данные в собственные файлы cookie в вашем домене.
Настройки тега «Связывание конверсий»
В качестве активации тега используется триггер «Все страницы». В большинстве случаев для работы тега связывания конверсий будет достаточно базовой настройки. Однако вы можете переопределить значения полей Имя (Name prefix), Домен (Domain) и Путь (Path) через настройку Linker Options:
- Имя. Префикс, используемый как часть имен cookie, по умолчанию – _gcl. Например, если вы измените имя на _gcl2, тег связывания конверсий установит файлы cookie под названием _gcl2_aw и _gcl2_dc. При изменении префикса все теги, считывающие информацию о кликах из этих файлов cookie (например, теги отслеживания конверсий AdWords), нужно будет перенастроить на использование такого же префикса.
- Домен. Домен, в котором устанавливаются собственные файлы cookie. По умолчанию тег связывания конверсий использует домен самого высокого уровня. Например, если адрес вашего сайта – blog.site.ru, тег связывания конверсий будет использовать домен site.ru. Это поле следует задавать, только если вы хотите указать для файлов cookie домен более низкого уровня.
- Путь. Путь для файлов cookie. По умолчанию используется корневой уровень (/). Это поле следует задавать, только если вам нужно указать для файлов cookie подкаталог домена.
Специальные теги Google Tag Manager
- Пользовательский HTML
- Пользовательское изображение
Пользовательский HTML
У тегов, которых нет встроенных шаблонов в GTM, используется категория «Специальные теги». К ним относятся, например, коды Яндекс.Метрика, Facebook Pixel, Ретаргетинг ВК и другие.
Пользовательский тег HTML – это код стороннего сервиса, который должен быть заключен внутри тегов . Вот так выглядит пользовательский HTML тег счетчика Яндекс.Метрика:
Пользовательский HTML-тег, Яндекс.Метрика
Вы также можете включить вызовы функции document.write() в тегах, установив соответствующий флажок.
Поддержка функции document.write
document.write() – метод добавления текста к документу. Он работает только пока HTML-страница находится в процессе загрузки и дописывает текст в текущее место HTML еще до того, как браузер построит из него DOM. Подробнее об этом методе читайте на learn.javascript.ru.
Также в пользовательский HTML тег можно вставлять встроенные и пользовательские переменные. Для этого используют конструкцию двойных фигурных скобок >.
Вставка переменных в HTML-тег
Пользовательское изображение
Помогает отслеживать поведение пользователей там, где не работают остальные теги (например, в браузерах с отключенным выполнением скриптов). В конце ссылки добавляется невидимый пиксель изображения с URL-адресом определенного формата со специальными параметрами. По ним происходит передача данных.
Universal Analytics, Пользовательский HTML и многие другие теги работают на основе JavaScript. Если они загружаются на странице, на которой отключена поддержка JavaScript, то теги не сработают.
В связи с этим разработчики Google предусмотрели возможность загрузки через тег . А он, в свою очередь, загружается частью контейнера и показывает свое содержимое, если браузер не поддерживает работу со скриптами или их поддержка отключена пользователем. В остальных случаях браузер игнорирует этот тег и все, что располагается внутри него.
Именно для этих целей и нужна вторая часть кода контейнера Google Tag Manager, которую Google просит разместить после открывающего тега :
Фрагменты кода контейнера GTM
Наиболее частое применение тега «Пользовательское изображение» в GTM — отслеживание посещений для пикселя Facebook. У этого типа тега всего две настройки:
Настройки пользовательского изображения
- URL изображения – поле, где содержится адрес изображения со всеми параметрами, которые нужно передать;
- Включить блокировку кэша (параметр gtmcb по умолчанию) – при включении обращения будут регистрироваться в том числе с браузеров с кэшированным изображением.
Знаете ли вы почему сайты загружаются так быстро? Одной из причин является кэширование. Первый раз, когда вы заходите на новый сайт, все статические элементы (шрифты, изображений, стили, скрипты и т.д.) загружаются во временную папку, которая будет хранить все эти файлы и в последующих заходах каждый раз показывать на соответствующих страницах. Периодически браузер проверяет, не обновились ли эти файлы на стороне сервера, и при необходимости загружает их заново.
С точки зрения пользователя – это удобно. Нет необходимости ждать очередной полной загрузки страницы. С точки зрения интернет-маркетологов и веб-аналитиков – это не очень хорошо, поскольку на странице данные не поменялись, файлы загрузились один раз во временную папку пользователя и больше отследить к ним обращения возможности нет.
Если отключить галочку параметра «Включить блокировку кэша», то тег сработает только при первой загрузке сайта, так как изображение будет загружено во временное хранилище. А при включении опции Google Tag Manager добавит параметр gtmcb к URL изображения со случайным значением. Например, так:
site.ru/image.jpeg?gtmcb=1713862799
Поскольку значение в URL всегда разное, браузеру придется каждый раз скачивать изображение. А раз это будет происходить каждый раз, то мы сможем отслеживать это событие постоянно. Поэтому этот параметр лучше всегда держать включенным.
В категории тегов «Еще» содержатся шаблоны к сервисам, которые не так популярны у нас, но которые часто используются в мире. Это и comScore Unified Digital Measurement, и тег Adroll Smart Pixel, и Criteo One Tag, и Hotjar Tracking Code, и другие. Руководства по настройке какого-либо тега из этой категории вы найдете на сайте поставщика.
Теги сторонних сервисов
Обычно теги активируются при загрузке страницы или в ответ на какое-либо действие на ней. В Google Tag Manager вы устанавливаете триггеры, определяющие, когда должны активироваться теги. Например, триггер «Все страницы» будет запускать тег на всех страницах при загрузке сайта.
Триггер активации – All Pages
Счетчик на js по кликам?
Есть ли такая возможность сделать оптимально счетчик товара, к примеру есть счетчик и две кнопки (- 1 +) когда нажимаешь + число увеличивается, нажимаешь — уменьшается, минимальное число 1 максимальное 4, при этом когда на счетчике число меняется оно меняется еще в одном месте, а также число счетчика умножается на определенное число и тоже меняется. Короче что бы было понятнее вот скрины) 
- Вопрос задан более трёх лет назад
- 17266 просмотров
Комментировать
Решения вопроса 2
Junior Frontend Developer
Находишь кнопку в коде и задаёшь id (атрибут «id=»твой любой id»)
В js с помощью getElementById(«твой id кнопки») добавляешь кнопку в переменную. Точно также делаешь с цифрой которая меняется.
Пример (Updated):
1 150 // 150 просто число для наглядности вычисления
JavaScript:
let calculate = document.getElementById("calculation"); let count = document.getElementById("buttonCountNumber"); calculation = document.getElementById("calculation").innerHTML; document.getElementById("buttonCountPlus").onclick = function() < let countPlus = count.innerHTML; if(+countPlus > document.getElementById("buttonCountMinus").onclick = function() < let countMinus = count.innerHTML; if(+countMinus >= 2) < count.innerHTML--; let countMinus = count.innerHTML; calculate.innerHTML = calculations(countMinus) ; >> calculations = (count) => < return calculation+` * $= ` + (+count)*(+calculation); >
Ответ написан более трёх лет назад
Нравится 3 9 комментариев