web-dev-qa-db-ja.com

Googleタグマネージャーとシングルページアプリ

EmberアプリとGoogleタグマネージャーを統合しようとしています。ページが変更されたことをGTMに通知し、ページビューイベントを送信する方法を理解できません。

私はオンラインで多くのことを読みましたが、主に「仮想ページ」または何かのための新しい変数の作成に取り組んでいますが、明らかにこれは理想からほど遠いです。

dataLayer.Pushを使用して、ページが実際に変更されたことを通知したいのですが。私が見つけなかった簡単な方法はありますか、それともSPAでGTMを使用して追跡するのは本当に面倒ですか？

google-tag-manager
16
Benjamin Netter

イベントをdataLayerにプッシュする必要があります。これをGTMでGAページビュータグをトリガーできます。イベントをDLにプッシュするには、次のようにします。

dataLayer.Push({'event':'virtualPageView'});

次に、「virtualPageView」というカスタムイベントで発生する「vpv」というトリガーを設定します。そのトリガーをGAタグに追加します。

イベントを送信するときに、仮想ページの詳細も送信するのが最善の方法です。このようにして、これらのdataLayerプロパティ値をページビュー呼び出しに取り込む変数を設定できます。だからあなたはこれをするかもしれません：

dataLayer.Push({
  'event':'virtualPageView',
  'page':{
    'title':'contact us',
    'url':'/contact'
  }
});

たとえば、「DL-ページタイトル」と呼ばれる変数を設定します。これは、「page.title」のdataLayer値である「DL-ページタイトル」と、「page.url」のdataLayer値である「DL-ページURL」と呼ばれる別の変数です。 。

次に、通常のすべてのページビュー設定を含み、2つの「設定するフィールド」（詳細設定の下）を持つ新しいユニバーサルアナリティクスタグを設定します。 'title'を{{DL-page title}}に設定し、 'page'を{{DL-page url}}に設定します

最後にトリガーを 'vpv'に設定すると、イベント+データをデータレイヤーにプッシュするたびに、仮想ページのタイトルと仮想URLでpageViewが起動されます。

15
dmpg_tom

これはかなり前に尋ねられました。 GTMの現在の機能セットを使用すると、簡単にSPAページトラッキングを設定できます。

まず、Triggersに移動し、新しいトリガーを作成します。トリガータイプとしてHistory Changeを選択します。これにより、ロケーション履歴が変更されるたびに起動するトリガーが作成されます。

次に、Universal Analyticsタイプの新しいTagを作成し、以下のスクリーンショットのように設定します。

[Universal Analytics tag configuration[1]

トリガーについては、以前に定義した履歴変更トリガーを設定すれば完了です。 SPAでナビゲーションが発生するたびに、適切なページパスを持つページビューイベントがトリガーされます。

18
András Szepesházi