Как лучше загружать трекеры и рекламные скрипты в эпоху AdBlock?

SPA на Vue.js, сборка Webpack.
  • для бесплатных пользователей подключена рекламная сеть ВК: преролл, баннеры.
  • для статистики прикручена Яндекс.Метрика
  • для работы с ВК загружается их скрипт xd_connection.js

Раньше грузил скрипты для работы перечисленного прямо с их сайтов просто через теги <script>. Всякие ad.mail.ru/static/admanhtml/rbadman-html5.min.js, vk.com/js/api/adman_init.js, сниппет Метрики, xd_connection.js
Потом через RequireJS грузил их же, с fallback'ом на локальные пустышки-затычки.
Некоторые баннерорезки не пропускают то один, то другой, то все разом, включая необходимый для работы xd_connection.

Рассматриваю варианты:
  1. при сборке копировать скрипты себе на сервер и включать в общий бандл
  2. сначала объявлять объекты-методы-пустышки с используемыми названиями, чтобы не возникало вызовов несуществующих методов; затем пытаться загрузить настоящие скрипты с CDN. Необходимейший xd_connection сначала грузить локальную копию (возможно, устаревающую), потом пытаться загрузить оригинал.
  3. все вызовы к «ненадёжным» скриптам обернуть в try-catch – но их много, особенно к Метрике


❓ Какова best practice для внешних JS скриптов третьих сторон, которые могут и не загрузиться?

Приоритеты:
  1. загрузить оригинал с их CDN и выполнить;
  2. если нет, то подсунуть локальную копию;
  3. если никак, то понять и простить (а не вылетать с ошибками) – а обращений к той же Метрике довольно много по всему приложению.


Написал такую загрузку с Promise:
addScriptPromise(url) {
  return new Promise((res, rej) => {
    const newScript = document.createElement("script");
    newScript.onerror = loadError => rej(loadError);
    newScript.onload = res;
    document.currentScript.parentNode.insertBefore(newScript, document.currentScript);
    newScript.src = url;
  });
}

// использую:
addScriptPromise('//yandex-cdn/metrika.js')
.then(undefined, err => addScriptPromise('/local-copies/metrika.chunk.js'))
.then(undefined, err => {
  App.Metrika = {  // к App.Metrika потом идут обращения для трекинга
  addFileExtension : function(){},
  clickmap         : function(){},
  enableAll        : function(){},
  extLink          : function(){},
  file             : function(){},
  hit              : function(){},
  replacePhones    : function(){},
  notBounce        : function(){},
  reachGoal        : function(){},
  trackLinks       : function(){},
  params           : function(){},
})
  • Вопрос задан
  • 934 просмотра
Решения вопроса 2
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
При использовании SPA все внешние скрипты-инициализаторы контента должны быть ВНУТРИ SPA и никаких внешних загрузок!

За версионностью и корректностью их работы внутри SPA - также следите Вы (обновился внешний->сохранили к себе->проверили->обновили сборку SPA).

Если речь про контроль загрузки внешнего контента (скриптами-инициализаторами), то здесь придётся создать дополнительно ещё и верификатор доступности внешнего ресурса, загружаемого основным скриптом (из SPA). Это можно сделать через подписку на события отслеживания ajax-соединений (и других необходимых).
Например, так.
Ответ написан
Отвечу только по метрике - я никогда вообще не делаю обращений к метрике или ga - у меня все методы собственные и уже внутри этих методов забиваются цели яндекса, ga и чего там еще придумают эти наши рекламщики.
Когда надо сменить счетчик, или исправить логику, или поймать ошибку не загрузившегося счетчика, то все это достаточно изменить в одном месте - моем скрипт который обслуживает цели.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега JavaScript
Как-то криво поставлена задача, отсюда и кривые потуги ее решить. Тебе надо выполнить определенный код после загрузки определенных скриптов. Все. Как ты их загрузишь - дело твое. Я полагаю все нужные скрипты ты пихал в head, и все у тебя работало, теперь не будет работать. Сначала все загружаешь, потом выполняешь.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Sportrecs Москва
от 150 000 до 200 000 ₽