Какой шаблон дизайна используется для таких фрагментов, как Google Analytics или Intercom? - PullRequest
Новая
       22

Какой шаблон дизайна используется для таких фрагментов, как Google Analytics или Intercom?

0 голосов
/ 17 мая 2019

Я хочу создать знакомый фрагмент для Google Analytics и Intercom:

Пример интеркома https://developers.intercom.com/installing-intercom/docs/basic-javascript

//Set your APP_ID
var APP_ID = "APP_ID";

window.intercomSettings = {
    app_id: APP_ID
  };
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();

или Google Analytics: 


Adding analytics.js to Your Site
The analytics.js library is a JavaScript library for measuring how users interact with your website. This document explains how to add analytics.js to your site.

The JavaScript measurement snippet
Adding the following code (known as the "JavaScript measurement snippet") to your site's templates is the easiest way to get started using analytics.js.

The code should be added near the top of the <head> tag and before any other script or CSS tags, and the string 'GA_MEASUREMENT_ID' should be replaced with the property ID (also called the "measurement ID") of the Google Analytics property you wish to work with.

Tip: If you do not know your property ID, you can use the Account Explorer to find it.
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Какие шаблоны дизайна Intercom и Google использовали для создания этих фрагментов?Как они работают внутри?Можете ли вы дать мне, может быть, базовую структуру, чтобы я мог заполнить ее необходимыми функциональными возможностями?

1 Ответ

2 голосов
/ 17 мая 2019

IIFE Google Analytics (Adn Intercom) - это, по сути, самый короткий способ написания загрузчика скриптов, который будет работать для всех браузеров.

Если мы напишем стенографию полностью, структура станет проще для чтения: 

window.GoogleAnalyticsObject = 'ga';
window.ga = window.ga || function() {
    window.ga.q = window.ga.q || [];
    window.ga.q.push( arguments );
},
window.ga.l = 1 * new Date();
var a = document.createElement( 'script' );
var m = document.getElementsByTagName( 'script' );
a.async = true;
a.src = 'https://www.google-analytics.com/analytics.js';
m.parenNode.insertBefore( a, m );

window.ga('create', 'UA-XXXXX-Y', 'auto');
window.ga('send', 'pageview');

Пример интеркома в основном делает то же самое.

Таким образом, этот скрипт сначала гарантирует, что в объекте window существуют правильные имена. Если объект Google Analytics уже существует, он будет использоваться, иначе он станет той функцией, которая будет сохранять данные в массиве. Это предотвращает добавление сценария несколько раз, поэтому, если другой плагин также попытается загрузить тот же сценарий, он поделится своим экземпляром GA.

Затем сценарий создает новый тег сценария и настраивает его по URL-адресу фактического сценария Google Analytics. Как только вновь созданные теги сценария будут добавлены на страницу, будет загружен действительный сценарий analytics.js.

Хотя я не смотрел на тонкие детали analytics.js, но я уверен, что он затем распакует или объединит созданный нами объект window.ga и заменит его фактическим аналитическим скриптом.

Итак, в общем, это причудливый способ написания <script src="https://www.google-analytics.com/analytics.js">, который будет работать в старых браузерах и будет гарантировать, что у нас не будет нескольких экземпляров сценариев, сражающихся друг с другом, если на одной странице загружено множество.

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

Edit:

window.ga = window.ga || function() {

эта строка гарантирует, что window.ga является функцией. Для простоты давайте рассмотрим страницу, на которой ga еще не существует.

Поэтому, когда мы вызываем ga('create', 'UA-XXXXX-Y', 'auto'); и ga('send', 'pageview');, мы запускаем следующие операторы: 

    window.ga.q = window.ga.q || [];
    window.ga.q.push( arguments );

window.ga.q = window.ga.q || []; гарантирует, что window.ga.q является массивом. И тогда window.ga.q.push( arguments ); выдвигает аргументы к нему.

Вызов ga('create', 'UA-XXXXX-Y', 'auto'); и ga('send', 'pageview'); до загрузки скрипта аналитики приводит к следующему: 

window.ga.q = [
  [ 'create', 'UA-XXXXX-Y', 'auto' ],
  [ 'send', 'pageview' ]
];

Помните, window.ga - это функция, но функция также является своего рода объектами в javascript. Таким образом, мы можем добавить свойство q к функции точно так же, как если бы window.ga был объектом, и функция все еще будет работать.

Как только скрипт аналитики загружается, он просматривает массив window.ga.q и запускает все эти команды.

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

...