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

Теги разбросаны по всему Интернету, и это самый простой способ для кого-то еще запустить свой код на вашем сайте. Ага, Фрики.

Теги Теги Теги

Это не совсем сельскохозяйственная статья. Мы не будем говорить о пометке коров уникальными идентификаторами, речь пойдет строго о веб-разработке (извините).

Я часто слышал о легкомысленных установках тегов на сайтах — например, в комментариях на StackOverflow, восхваляющих продукт, или произвольном списке «10 лучших тегов для установки» из публикаций, которые мы предпочли бы не упоминать. Прежде чем устанавливать тег, вы должны поинтересоваться, что он делает, какие вызовы API он делает и что еще происходит (он звонит домой?). Что делает неминифицированный? против того, что он утверждает, что делает?

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

Часто поставщику доверяют не быть злым, и этот скрипт (где бы он ни размещался — не дай Бог, вы получаете его напрямую с чьей-то еще CDN) не должен меняться и ломаться.

Я помню, как начинал и не очень понимал управление тегами как масштабируемую концепцию — конечно, я поставил GA на кучу своих сайтов и HotJar для развлечения — хотя я действительно не понял этого. Перенесемся на 4 года вперед: я управлял тегами, создавал теги для крупных организаций, небольших личных проектов и на нескольких платформах. Я видел много хорошего и плохого. Знание управления тегами — это мощная вещь — одно из десятков орудий веб-разработчика, чтобы пополнить этот постоянно расширяющийся арсенал — способность уверенно критиковать и создавать теги — еще одно.

Обычный вариант использования тегов — измерение вещей. Аналитика, отслеживание рекламы и конверсия. Обычно с пикселем или какой-то другой магией — гм — это не магия, это просто javascript. Прослушивание событий, ожидание триггеров или любое другое количество вещей, которые обогатят то, что вы получите от посещения. Это еще до того, как мы пойдем по пути DataLayers (золотой ключик к добру).

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

Строить Строить Строить

Мы собираемся создать тег измерения, который будет отслеживать клики. Для сборки нам нужно достичь 4 целей:

  1. Привлекайте слушателей к вещам, которые мы хотим измерить
  2. Отправка и чтение из очереди
  3. Выполнение вызовов API
  4. Объединить и экспортировать проект

Что мы собираемся сделать, так это создать тег и установить его с помощью объекта конфигурации. Тег привязывает слушателей ко всем <a/>tags и при нажатии отправляет полезную нагрузку в очередь. Диспетчер будет запускаться каждые 1000 мс, и если он найдет полезные нагрузки в очереди, он будет потреблять очередь и отправлять все элементы в конечную точку API.

(здесь мы не будем описывать, как принимать полезную нагрузку — посмотрите, как это сделать с помощью node express здесь и здесь или с помощью API Gateway -> лямбда-обработка полезных нагрузок)

В псевдокоде это будет примерно так:

allAnchorTags = document.querySelectorAll(‘a’);
allAnchorTags.forEach(a => a.addEventListener(‘click’, pushToQueue));
setInterval(api.dispatch(q.consume()), config.timing);

Клонирование или разделение экрана продолжить чтение с репозиторием https://github.com/mewc/measuretag-q-example

Инициализация проекта

Давайте используем узел для организации вещей. Назовем инструмент myCustomEventTracker. Нам нужен файл index.js для init(), файл api.js для обработки запросов API и файл q.js для обработки очереди данных.

Мы будем играть с двумя объектами: myCustomEventTrackerConfig и myCustomEventTracker

Q

Очередь как концепция удерживает элементы до момента, когда она может продолжаться. В этом случае у нас будет массив, содержащий объекты, и consume() вызывается, когда приходит время отправки, а затем сбрасывает q.

API

Для отправки в REST API с нашей полезной нагрузкой требуется оболочка. Мы можем использовать очень популярный axios или многие другие, которые объединяют полезные нагрузки и обрабатывают логику вызова. В нашем репозитории я поместил сюда простую оболочку, которая отправляет данные, когда данные присутствуют, и обрабатывает ответ в промисе.

Показатель

Как показал наш вышеприведенный псевдокод, мы можем аккуратно прикрепить прослушиватель к элементам (т. е. ко всем <a/> tags), заполнить Q по мере того, как происходят клики, и через определенные промежутки времени использовать Q для передачи данных на сервер. Нам также необходимо:

  • Инициализировать объекты окна для последующего взаимодействия
  • Принять или установить значения конфигурации по умолчанию
  • Требовать внешние файлы и зависимости (если требуется)

Первые два можно покрыть примерно так:

window[‘myCustomEventTrackerConfig’] = window[‘myCustomEventTrackerConfig’] || { timing: 2000, url: “https://testurl.com" };
window[‘myCustomEventTracker’] = window[‘myCustomEventTracker’] || init();

Однако для третьего потребовались другие хитрости — Webpack и Babel. Именно так я элегантно перехожу к нашей 4-й цели: «Объединить и экспортировать проект».

Компиляция

Webpack — это сборщик модулей, а Babel — это цепочка инструментов для трансформации, полифилла и обеспечения совместимости — попробуйте здесь (хорошо). Вместе эти инструменты являются основой каждого веб-разработчика. Часто эти инструменты отходят на второй план в качестве фоновых задач (привет, create-react-app). Я, конечно, понял это, когда начинал в СПА-стране — всегда слышал названия, но не вникал в их хитросплетения. Следующее, что вы знаете, я углубляюсь, теперь я здесь говорю о них. Наступает момент, когда вы не можете и не должны просто позволить Webpack и Babel работать в фоновом режиме.

Нам нужно рассмотреть ряд ключевых частей, чтобы включить наш многофайловый модуль в стиле ES6+ Js, управляемый зависимостями. Создайте webpack.config.js, с помощью которого Webpack соберет ваши файлы в единый модуль.

Нам понадобятся такие вещи, как @babel/preset-env для ES5 уточнения кода, среди прочего. Это предназначено для легкого вывода — вы можете прочитать более подробно о Webpack здесь или в их документах.

Webpack имеет множество забавных функций в loaders. Мы также будем использовать Babel Loader, куда мы можем импортировать новые пресеты. file-loader имеет хороший заполнитель [contenthash], который получает уникальный хэш для каждого кода сборки — внесите изменение в код, и вы получите новую contenthash следующую сборку. Многие другие заполнители существуют и находятся здесь

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

Когда будете готовы, запустите yarn build , который запускает Webpack со спецификациями файлов конфигурации, и в папке ./build вы найдете результат. Минимизированный файл и исходная карта (сама по себе очень удобная), о которой вы можете прочитать подробнее здесь

Развернуть

Теперь со встроенными файлами вы можете взять файл myCustomEventTracker-<etc.>.min.js и использовать что-то вроде Диспетчера тегов Google (есть десятки других, хотя это бесплатный и нормальный). Подробнее о GTM здесь. Вам нужно создать новый тег как Пользовательский HTML.

И либо скопируйте код напрямую, либо сделайте что-нибудь более причудливое и загрузите его в корзину S3 и оттуда вытащите src.

<script src=”https://mycustomtag-builds.s3-ap-southeast-2.amazonaws.com/mycustomtag.1.1-43534535435a.min.js"></script>

В любом случае это приведет к тому же результату. Я всегда рекомендую вариант с самостоятельным хостингом, чтобы вы могли интегрировать свой проект, развертывание и сборки с какими-либо действиями конвейера DevOps/NoOps для развертывания новой стабильной версии файла тегов. Это само по себе тема для другого раза.

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

Общий

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

Сколько импортируется напрямую из внешней CDN? Сколько управляется внутри или создается командой? Какие угрозы безопасности вы можете обнаружить с помощью быстрого 5-минутного аудита? Какой код существует в вашем диспетчере тегов, который можно извлечь и создать с помощью некоторых навыков, которые мы здесь изучили?

Я надеюсь, что то, что вы прочитали, вызовет интерес и вопросы. Как всегда, продолжайте строить.