web-dev-qa-db-ja.com

Google Analyticsコードの説明

誰かがこのコードを「ステップバイステップ」、「ラインバイライン」で説明できますか？非同期コードと、Googleがスクリプトを読み込む方法、ユーザーからjavascripptを「非表示」にする方法について詳しく学びたい（私はそれを非表示にできないが、少なくともGoogleのように、すべてのコードを表示しないことを知っている1つのファイル）

<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','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com');
  ga('send', 'pageview');
</script>
javascriptgoogle-analytics
33
Milos Miskone Sretin

まず第一に、私はこれを美化器に渡します。 http://jsbeautifier.org/

 (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', '//www.google-analytics.com/analytics.js', 'ga');

 ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com');
 ga('send', 'pageview');

その後、閉鎖を評価しましょう

(function (i, s, o, g, r, a, m) {
...
 })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

名前付きパラメーターのそれぞれを置き換えることにより：i, s, o, g, rとそれに対応する値window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'

aおよびmパラメーターには入力値がなく、結果変数に似ていることに注意してください。

これはおおよそ（変数のスコープなどを気にしないで）と同等です

(function (i, s, o, g, r, a, m) {
     window['GoogleAnalyticsObject'] = 'ga';
     window['ga'] = window['ga'] || function () {
         (window['ga'].q = window['ga'].q || []).Push(arguments)
     }, window['ga'].l = 1 * new Date();
     a = document.createElement('script'),
     m = document.getElementsByTagName('script')[0];
     a.async = 1;
     a.src = '//www.google-analytics.com/analytics.js';
     m.parentNode.insertBefore(a, m)
 })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

 ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com');
 ga('send', 'pageview');

要するに、このコードの本質は、次の行で新しいスクリプトタグを作成することです。

a = document.createElement('script'),

次に、最初のスクリプトタグを見つけます

m = document.getElementsByTagName('script')[0];

次に、新しく作成されたスクリプトタグを非同期実行に設定します（非同期実行の詳細は、 レイマンの用語で非同期コードを理解する 必要に応じて取得できます）

a.async = 1;

上記の行の1はtrueと同等です。短いという理由だけで1が使用されます。

その後、このスクリプトタグのsrcが設定されます

 a.src = '//www.google-analytics.com/analytics.js';

上記のプロトコル（httpまたはhttps）はURLで指定されていないことに注意してください。これにより、現在のブラウザプロトコルでスクリプトをロードできます。

最後に、最初のスクリプトタグの前に挿入されるため、ブラウザはロードを開始できます。

 m.parentNode.insertBefore(a, m)

summarize：

  1. scriptタグを作成します
  2. 非同期にロードするように設定しますasync=true
  3. ドキュメント内の最初のスクリプトタグの前に、このスクリプトタグを挿入します

Googleアナリティクスに関連する詳細。

 window['ga'] = window['ga'] || function () {
     (window['ga'].q = window['ga'].q || []).Push(arguments)
 }, window['ga'].l = 1 * new Date();

キュー配列（gaという名前）に引数をプッシュするqという名前のグローバル関数を定義します

その後、線で

 ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com');
 ga('send', 'pageview');

これらの「イベント」をキュー配列にプッシュします。

スクリプトがロードされると、GoogleAnalyticsObjectの値を確認します。これは、以前にgaの名前を指すように設定されていました。

 window['GoogleAnalyticsObject'] = 'ga';

お役に立てれば

80
Zlatin Zlatev

Googleはこのコードの縮小されていないバージョンを公開しています。

<!-- Google Analytics -->
<script>
/**
 * Creates a temporary global ga object and loads analytics.js.
 * Parameters o, a, and m are all used internally. They could have been
 * declared using 'var', instead they are declared as parameters to save
 * 4 bytes ('var ').
 *
 * @param {Window}        i The global context object.
 * @param {HTMLDocument}  s The DOM document object.
 * @param {string}        o Must be 'script'.
 * @param {string}        g Protocol relative URL of the analytics.js script.
 * @param {string}        r Global name of analytics object. Defaults to 'ga'.
 * @param {HTMLElement}   a Async script tag.
 * @param {HTMLElement}   m First script tag in document.
 */
(function(i, s, o, g, r, a, m){
  i['GoogleAnalyticsObject'] = r; // Acts as a pointer to support renaming.

  // Creates an initial ga() function.
  // The queued commands will be executed once analytics.js loads.
  i[r] = i[r] || function() {
    (i[r].q = i[r].q || []).Push(arguments)
  },

  // Sets the time (as an integer) this tag was executed.
  // Used for timing hits.
  i[r].l = 1 * new Date();

  // Insert the script tag asynchronously.
  // Inserts above current tag to prevent blocking in addition to using the
  // async attribute.
  a = s.createElement(o),
  m = s.getElementsByTagName(o)[0];
  a.async = 1;
  a.src = g;
  m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

// Creates a default tracker with automatic cookie domain configuration.
ga('create', 'UA-XXXXX-Y', 'auto');

// Sends a pageview hit from the tracker just created.
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

https://developers.google.com/analytics/devguides/collection/analyticsjs/tracking-snippet-reference

Zlatinの行ごとの説明はまだ有効です。

27
broc.seib

i['GoogleAnalyticsObject']=r;これは、「ga」を「window」の「GoogleAnalyticsObject」プロパティに割り当てています

window['ga'] = window['ga'] || function(){
        (window['ga'].q = window['ga'].q || []).Push(arguments)
    }, window['ga'].l = 1 * new Date();

この部分は、windowの「ga」プロパティを関数（または既に存在する場合はそれ自体）として割り当てています。次に、関数はqプロパティを空の配列として割り当て、すべての関数引数をそれに追加します。次に、現在のタイムスタンプにlプロパティを割り当てます（整数として強制するには1を乗算します）。

次の行では、スクリプトタグを作成し、sourceやasync = trueなどの属性を割り当ててから、このスクリプトタグをドキュメントに追加します。

3
Carl Markham

コードは縮小されます。 http://jsbeautifier.org/ を使用すると、それを元に戻して（ソート）、少し読みやすくすることができます。基本的に、同じプロトコル（httpまたはhttps）を使用して別のjavascript（www.google-analytics.com/analytics.js）をdomに追加する小さな関数です。

(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', '//www.google-analytics.com/analytics.js', 'ga');
2
Phobos

コードはミニファイヤを介して実行されており、きれいに印刷すると次のようになります。

(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', '//www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com');
ga('send', 'pageview');

それが何をするのかを正確に知るには、おそらくanalytics.jsファイルを確認する必要がありますが、それも同様に縮小される可能性が高いので、そこから多くを得ることはありません。

同じことをしたい場合は、JSMinのようなコードミニファイヤを使用できます。これは、帯域幅を削減するために、とりわけ、不要な空白や改行文字を置き換えます。

1
fnostro