Почему такие сайты, как Hotjar и Google Analytics, используют сложный код отслеживания, а не просто тег <script>?

Question

Почему такие сайты, как Hotjar и Google Analytics, используют сложный код отслеживания, а не просто тег <script>?

Сайт, использующий JS-отслеживание, обычно использует такой код:

<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:9999,hjsv:5};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>

В конце концов, эти сценарии просто добавляют <script> тег к <head> страницы, поэтому, безусловно, должна быть причина, почему они делают это таким образом.

Это из-за обхода блокировки рекламы? Разве сгенерированный запрос не будет таким же, как если бы он был жестко закодирован в <head>?

4

javascript google-analytics event-tracking hotjar

Источник

user8511573 24 авг '17 в 12:17

2 ответа

Другие вопросы по тегам javascript google-analytics event-tracking hotjar

user1864944 26 авг '17 в 22:22 2017-08-26 22:22 · Answer 1 · 2017-08-26 22:22

Я главный архитектор в Hotjar, поэтому я объясню причины, почему мы сделали это именно таким образом.

Нам нужно что-то сделать до загрузки основного скрипта.
h.hj = h.hj || функция (){. (h.hj.q=h.hj.q||[]) толкать (аргументы)};

Именно эта строка позволяет нам хранить действия, выполняемые после загрузки основного скрипта. Он позволяет вызывать такие вещи, как hj('trackVirtualPageView', '/url') перед загрузкой нашего скрипта.

Мы можем хранить такие вещи, как настройки, как часть фрагмента.
h._hjSettings = {hjid: 9999, hjsv: 5};

Это может быть добавлено как часть строки запроса при загрузке скрипта. Недостатком использования этого подхода является то, что мы получили бы менее оптимальное кэширование, так как браузер не мог бы знать, что script.js? Hjid=1 и script.js? Hjid=2 фактически загружают один и тот же файл JS.

То, что мы делаем в последней части, на самом деле просто создает <script async=1> пометить и добавить его в <head> который работает очень хорошо. Причина, по которой мы делаем это с помощью JS, заключается в том, что нам нравится делать это как можно проще для наших пользователей, просто прося их размещать код в одном месте.

Возможно, было бы еще лучше делать то, что мы делаем, о чем я блаженно не подозреваю, и, если это произойдет, пожалуйста, дайте мне знать об этом!:)

user761212 24 авг '17 в 14:27 2017-08-24 14:27 · Answer 2 · 2017-08-24 14:27

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

Если браузер нажимает на элемент скрипта, он пытается получить источник скрипта и может помешать отображению страницы, пока весь скрипт не будет загружен. В старые добрые времена случалось так, что веб-сайт показывался пустым, потому что (тогда синхронный) скрипт Google Analytics не мог быть загружен своевременно и остановил отображение страницы. Внедрение сценариев стало общепринятым способом сделать сценарии неблокирующими.

Существуют и другие способы (отсрочка, асинхронность и т. Д. - для исторического интереса здесь приведена ссылка на статью 2009 года, в которой обсуждается проблема, поскольку проблема уже устарела), но внедрение сценариев является удобным способом установки нескольких переменных вдоль способ (плюс, если Google делает это, это должен быть лучший способ, или, похоже, такой же процесс для некоторых компаний).