2016-11-14 5 views
2

カスタムページビューとログイベントを追跡するコマンドを送信するカスタムGoogle Analyticsプラグインがあります。ここに私たちのシナリオの簡略化REPROです:analytics.jsがページに直接含まれている場合名前のないトラッカーにgaコマンドを送信するにはどうすればよいですか?

// Version 1: only works with analytics.js, not with GTM 

function GaPlugin(tracker, config) { 
    // Simplified for SO, we actually use the config argument 
    // to track more interesting pages and events... 
    ga(tracker.get('name') + ".send", "pageview", "/virtual/page/view"); 
} 

var ga = window[window["GoogleAnalyticsObject"] || "ga"]; 

if (typeof ga == "function") { 
    ga("provide", "myAnalytics", GaPlugin); 
    ga("require", "myAnalytics", { /* omitted for simplicity */ }); 
} 

これが正常に動作します。ただし、Googleタグマネージャを使用してページにユニバーサルアナリティクスを組み込むようになりました。したがって、恐ろしいエラーに遭遇しました...

コマンドが無視されました。不明なターゲット:未定義

... requireコマンドが実行されているときにGoogleアナリティクスのデバッグChromeプラグインに表示されます。

This questionthis blogpost(使用して、GTMに:編集タグ=> [詳細設定] => [詳細設定=>設定トラッカー名]チェックボックスを)トラッカー名を設定する必要性を意味するものではなく、ツールチップは、「名前のトラッカーの使用は非常にあると言いますGTMで落胆しました。

// Version 2: crashes with GTM because ga is loaded after this code 

function GaPlugin(tracker, config) { 
    // Simplified for SO, we actually use the config argument 
    // to track more interesting pages and events... 
    ga(tracker.get('name') + ".send", "pageview", "/virtual/page/view"); 
} 

var ga = window[window["GoogleAnalyticsObject"] || "ga"]; 

if (typeof ga == "function") { 
    ga("provide", "myAnalytics", GaPlugin); 
    ga(ga.getAll()[0].get("name") + ".require", "myAnalytics", { }); 
} 

しかし、私はブートストラップに自分のコードを実行する場所GTMは、非同期ユニバーサルアナリティクスをロードしますので gaは、 undefined時には、上記実行ですので、今、私はエラーと会ったんだ。だから、代わりに私はこれに物事を変更しましたすぐにプラグイン。これはまた、 gaコマンドキューにコールバックを置くことができないことを意味します。なぜなら、それはまだ存在しないからです。本質的には

、物事の順序は(私が思う)今ある:

  1. GTMスニペットは、(非同期)のロードを開始。
  2. 私自身のJavaScriptコードが実行されます。
  3. GTMは解析の読み込みを開始します(非同期)。
  4. Analyticsが読み込まれ、使用する準備ができました。私がいた。この考えることができ

唯一の回避策:

// Version 3: ugly workaround... 

function GaPlugin(tracker, config) { 
    // Simplified for SO, we actually use the config argument 
    // to track more interesting pages and events... 
    ga(tracker.get('name') + ".send", "pageview", "/virtual/page/view"); 
} 

var interval = setInterval(function() { 
    var ga = window[window["GoogleAnalyticsObject"] || "ga"]; 

    if (typeof ga == "function" && typeof ga.getAll == "function") { 
     ga("provide", "myAnalytics", GaPlugin); 
     ga(ga.getAll()[0].get("name") + ".require", "myAnalytics", { }); 
     clearInterval(interval); 
    } 
}, 250); 

はこれを行うには良い方法はありませんか? GTMのドキュメントやGAプラグインのドキュメントにはこれに関する情報があるようです。脚注として


、私はちょうど私が、コマンドは自分自身をキューとしてgaを作成することにより、the tracking snippetを模倣している場合、それはまた働くかもしれないが実現。しかし、それは解決策ではなく、回避策のように感じています。

+0

GAライブラリを読み込んだらトラッカー名を取得するには、gaコマンドキューを呼び出す必要があります(https://developers.google.com/analytics/devguides/collection/analyticsjs/command-queue-reference)。 – nyuen

+0

問題は、GTMがアプリケーションコードの後に​​非同期に解析を読み込むため、アプリケーションコードが実行されているときにコマンドキューが使用できない(つまり、gaが未定義である)ということです。 – Jeroen

答えて

0

私の解決策を答えとして共有してもらえますが、実際には私が今使っている解決策です。最後の脚注に基づいています.Googleアナリティクスのブートストラップスニペットの仕組みを模倣しています。

私は、自分自身をgaオブジェクト、または少なくともそのqプロパティを設定してい:

function createGoogleAnalyticsQueueIfNeeded() { 
    // As a workaround for: http://stackoverflow.com/questions/40587544 
    // We mimick: https://developers.google.com/analytics/devguides/collection/analyticsjs/tracking-snippet-reference 
    var gaKey = window["GoogleAnalyticsObject"] || "ga"; 
    var ga = window[gaKey] || function() { 
     (window[gaKey]["q"] = window[gaKey]["q"] || []).push(arguments); 
    }; 
    window[gaKey] = ga; 
    return ga; 
} 

上記を呼び出した後、あなたはGTMが終了した時はいつでも実行されますそのキューにコマンドを配置することができます(また、のすべてのトラッカープラグインを実行するための最適化を含む)GAをロード:

var ga = createGoogleAnalyticsQueueIfNeeded(); 

ga(function() { 
    ga("provide", "myAnalytics", GaPlugin); 
    ga.getAll().forEach(function(t) { 
     ga(t.get("name") + ".require", "myAnalytics", { }); 
    }); 
}); 

をEt出来上がり、provide.requireコールコールバック時にGA(GTM経由でロードされた)のホールラーが実行されるたびに実行されます。

関連する問題