web-dev-qa-db-ja.com

AngularJSを使用したGoogleタグマネージャー

AngularでGTMを使用するにはどうすればよいですか？

このコードを使用して新しいパーシャルをロードすると、（仮想）ページビューイベントを発生させようとしています：

dataLayer.Push({
    'event' : 'pageview',
    'pageview' : $location.path(),
    'virtualUrl' : $location.path()
 });

しかし、イベントの発生が表示されません（Google Analytics Chromeデバッグ拡張機能を使用して、発生したイベントを表示しています）。

javascriptangularjsgoogle-analyticsgoogle-analytics-apigoogle-tag-manager
18
Christian THC

Chrome拡張機能の信頼性が低いことがわかりました。コンソールでグローバル変数dataLayerを実行するだけで、イベントの配列が出力されます。オブジェクトの1つがページビューイベントである必要があります。

次に、使用方法の例を示します。

注：単に$location.path()を使用しているのではなく、ドメインの後のURLのすべてを使用しています。これには、.search()＆.hash()が含まれます。

$ location in the Angular docs

modules/analytic.js

_(function(window, angular) {
    'use strict';
    angular.module('Analytic.module', ['Analytic.services']).
        run(function($rootScope, $window, $location, GoogleTagManager) {
            $rootScope.$on('$viewContentLoaded', function() {
                var path= $location.path(),
                    absUrl = $location.absUrl(),
                    virtualUrl = absUrl.substring(absUrl.indexOf(path));
                GoogleTagManager.Push({ event: 'virtualPageView', virtualUrl: virtualUrl });
            });
        });
})(window, window.angular);
_

services/analytic.js

_(function() {
    angular.module('Analytic.services', []).
        service('GoogleTagManager', function($window) {
            this.Push = function(data) {
                try {
                    $window.dataLayer.Push(data);
                } catch (e) {}
            };
        });
})();
_

GTMで

同じ名前のdataLayer変数をリッスンする_{{virtualUrl}}_および_{{event}}_マクロが必要です。

_{{event}}_が 'virtualPageView'と等しい場合にトリガーされる発火ルールが設定されたGoogleアナリティクスイベントトラッキングタグが必要です。すべてのページの読み込みで実行されるように、デフォルトの「すべてのページ」ルールを必ず削除してください。代わりに、イベントをdataLayer.Push()したときに実行します。これは、ページの更新ごとに複数回発生する可能性があります。

タグは次のように構成する必要があります。

  1. トラックタイプ== 'ページビュー'
  2. [詳細設定]> [基本構成]> [仮想ページパス] == '{{virtualUrl}}'
23
Mike Causer

angulartics ライブラリを使用することを強くお勧めします。複数のサイトで使用しています。それはあなたをかなり速く走らせます。

これには、仮想ページビューとイベントのサポートが含まれています。 GA eCommerceはサポートしていませんが、拡張性はサポートしています。

また、GTMとPiwikの両方で使用しました。

1
Kunal

受け入れられた回答と同様に、単一ページアプリのコントローラーで、JavaScriptのpagename変数を使用して、よりシンプルで明確なソリューションを作成しました。

// Note, this may not be how your app works, YMMV
var pagename = $location.path().substr(1,$location.path().length);

次のようにそれらをdataLayerにプッシュします。

window.dataLayer.Push({'event':pagename+'-page'})

次に、GTMで次のようにGTMにトリガーを追加しました。

Trigger: Custom Event
Event Name: home-page

... about-page、faq-pageなど.

より複雑なangularアプリの場合、AngularでGoogleアナリティクスとGoogleタグマネージャーを使用するためのいくつかの拡張機能があります。

Angulartics （プラグインアーキテクチャを介してGoogle Analytics以外のWeb分析ソリューションもサポートします）および関連する GTMのNPMパッケージ を参照してください。

0
phpguru

コードを追加する必要はありません。

「履歴変更」トリガーを設定します。これはangularルート変更によってトリガーされます。トリガーとして「ページビュー」タグに追加します。

0
natanavra