Google-tag-manager-data-layer

提供：Dev Guides
移動先:案内、検索

Googleタグマネージャー-データレイヤー

データレイヤーは、Googleタグマネージャーで渡して処理するすべての情報を保持するオブジェクトと見なすことができます。 これは少し技術的な概念です。 データレイヤーという用語は、Googleタグマネージャーがウェブサイト/ブログとタグマネージャーの間でデータを保存、処理、渡すために使用するデータ構造を示すために使用されます。

さらに詳しく説明するために、データレイヤーは、訪問者に関する分析ツールにデータを提供できます。 定義の別の観点から見ると、データレイヤーは、実際にはデジタルコンテキストの各サブセットのビジネス要件と目標のリストです。

私たちはeコマースのウェブサイトの例を見てみましょう、ビジネス要件が含まれる場合があります-

  • 購入したものに関する詳細を含むトランザクション情報
  • 購入者に関する訪問者データ
  • 購入が行われた場所や時間など、購入に関するその他の詳細
  • 最後に、訪問者が電子メールを購読しているかどうかなど、他の要因に関する情報

つまり、データレイヤーには、必要に応じてさまざまなツール/ユーザー/利害関係者が使用できる情報が含まれています。

Googleタグマネージャーでは、dataLayerはJavaScript配列です。 キーと値のペアで構成されます。 以下は、異なるデータ型を持つdataLayerの簡単な例です- 

dataLayer = [{
   'products': [{
      'name': 'Western Cotton',
      'tuning': 'High-G',
      'price': 49.75
   },
   {
      'name': 'Fenda Speakers',
      'tuning': 'Drop-C',
      'price': 199
   }],
   'stores': ['Hyderabad', 'Bangloer],
   'date': Sat Sep 13 2017 17:05:32 GMT+0530 (IST),
   'employee': {'name': 'Raghav}
}];

ここでは、オブジェクトの配列（製品）、数値（価格）、文字列の配列（ストア）、日付オブジェクト、オブジェクト（名前）など、さまざまな値があります。

また、ウェブサイトにGoogleタグマネージャーコンテナコードを配置すると、データレイヤーが自動的に作成されます。

データレイヤー自体は、最初は理解するのが非常に複雑な概念です。 この章では、データレイヤーと対話する方法についてさらに詳しく説明します。

データ層イベント

データレイヤーイベントの簡単な例として、自動GTMリスナーでは簡単に追跡できないニュースレター登録フォームがあります。 Webサイト開発者は、新しいサブスクライバーがWebサイトで自分の電子メールを入力したら、データレイヤーイベントをプッシュすることをサポートできます。 このイベントのコードは次のようになります- 

push({‘event’: ‘new_subscriber’});

必要に応じて、フォームの場所などの追加情報を開発者に依頼できます。 これは、Webサイトに複数のフォームがある場合に必要です。 次のコードを使用して実現できます。 

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'formLocation': ‘footer’,
   'event': new_subscriber
});

また、Googleタグマネージャーは、特定の値のセットをデフォルトでウェブアプリケーションのデータレイヤーにプッシュします。 これらの値は-

  • gtm.js -Googleタグマネージャーの実行準備が整うとすぐにデータレイヤーにプッシュされる
  • gtm.dom -DOMの準備ができたときにデータ層にプッシュされる
  • gtm.load -ウィンドウが完全にロードされたときにデータレイヤーにプッシュされる

データ層の検査

すでにご存知のように、画面上の操作の結果として作成される特定のイベントがあります。

たとえば、この単純なページ読み込みイベントを考えてみましょう。 イベントを確認するには、デバッガーを実行する必要があります。 デバッガーを（プレビューモードで）実行したら、ブログにアクセスしてください。 あなたが左下隅にある要約ウィンドウを見ると、これはあなたが見るものです-

データレイヤー

  • ステップ1 *-[ロードされたウィンドウ]をクリックし、[データレイヤー]をクリックします。

[データレイヤー]タブに表示される情報は、Window Loadedイベントに関するものです。

次のように表示されます– \ {event： ‘gtm.load’、gtm.uniqueEventId：3}

さらに、詳しく見てみたい場合は、Chromeのコンソールタブからサポートを受ける必要があります。 Chromeデバッガーを正しい方法で使用する方法を知っていれば、データレイヤーの検査が簡単になります。

  • ステップ2 *-ブログを開いているときに、ページの任意の部分を右クリックします。 表示されるコンテキストメニューで、[検査]をクリックします。 パネルが画面の右側に表示され、「要素」タブがアクティブになります。
  • ステップ3 *-コンソールをクリックします。 コンソールモードで、左上隅のアイコンをクリックして、表示されているすべてのメッセージをクリアします。 次のスクリーンショットを参照してください。

コンソール

  • ステップ4 *-以前のメッセージのウィンドウがクリアされたら、dataLayerと入力し、Lの大文字化が完了したことを確認します。 この名前は、Googleタグマネージャーによってデータレイヤーに提供されます。 ただし、開発者は必要に応じて別の名前を割り当てることができます。
  • ステップ5 *-dataLayerの後にEnterキーを押します。 以下の詳細が表示されます。

GTMデータレイヤー

3つのオブジェクトがあり、各オブジェクトにはいくつかの情報が含まれています。 さて、これらのオブジェクトは上のスクリーンショットに示されているように、あなたにとって同じではないかもしれません。 dataLayerは構成可能であり、要件に従って構成することは開発者の管理下にあります。

存在する値は、その特定の位置/スペースで使用されているBloggerガジェットによるものです。 これが、そこに特定の情報がある理由です。

オブジェクト1を見ると、発生するイベントは_gtm.dom_であることがわかります。 ページの読み込み中にGTMによって起動されます。

このようにして、データレイヤーを検査し、必要に応じて情報を追加できます。

データ層の変数

データレイヤーに精通したので、Google Tag Manager Interfaceを使用して変数の1つを読み取ってみましょう。

ここでは、データレイヤー変数を使用してイベントを読み取ろうとします。

上の図を見ると、変数eventは_gtm.dom_を保持しています。 GTMインターフェースから変数を作成し、Googleタグマネージャーの[変数]タブにどのように反映されるかを確認します。

  • ステップ1 *-Googleタグマネージャーインターフェースで、[変数]に移動します。 ユーザー定義変数までスクロールします。 新規をクリックします。
  • ステップ2 *-この新しい変数に名前を付けて、varEventとして呼び出します。
  • ステップ3 *-[変数の種類を選択]をクリックして、セットアップを開始します…

新規をクリック

  • ステップ4 *-リストからデータレイヤー変数を選択します。
  • ステップ5 *-データレイヤー変数を選択すると、名前とバージョンを指定する必要があります。

データレイヤー変数

この名前は、Googleタグマネージャーの実際のデータレイヤーから取得されます。 前述したように、追跡する変数はイベントです。

  • ステップ6 *-データレイヤー変数名にイベントを入力します。
  • ステップ7 *-[保存]をクリックします。
  • ステップ8 *-[プレビュー]をクリックして、デバッガーに反映された変更を確認します。

データレイヤー変数名

  • ステップ9 *-ページが読み込まれたら、[読み込まれたウィンドウ]、[変数]の順にクリックします。 [変数]セクションの一番下までスクロールすると、上記のスクリーンショットで強調表示されているように、varEventが表示されます。

上記のスクリーンショットに見られるように、値はgtm.loadになります。

このようにして、データ層を検査し、必要に応じてデータ層の値をキャプチャできます。

「https://www.finddevguides.com/index.php?title=Google-tag-manager-data-layer&oldid=6621」から取得
Powered by MediaWiki