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 −ウィンドウが完全にロードされると、データレイヤーにプッシュされます

データレイヤーの検査

すでに知っているように、画面上のインタラクションの結果として作成される特定のイベントがあります。

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

Step 1 − [ウィンドウの読み込み]、[データレイヤー]の順にクリックします。

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

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

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

Step 2−ブログを表示しているときに、ページの任意の部分を右クリックします。表示されたコンテキストメニューで、[検査]をクリックします。パネルは画面の右側に表示され、[要素]タブがアクティブになります。

Step 3− [コンソール]をクリックします。コンソールモードの場合は、左上隅のアイコンをクリックして、表示されているすべてのメッセージをクリアします。次のスクリーンショットを参照してください。

Step 4−前のメッセージのウィンドウがクリアされたら、dataLayerと入力し、Lの大文字化が完了していることを確認します。この名前は、Googleタグマネージャーによってデータレイヤーに提供されます。ただし、開発者は必要に応じて別の名前を割り当てることができます。

Step 5−dataLayerの後にEnterキーを押します。以下の詳細が表示されます。

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

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

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

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

データレイヤーの変数

データレイヤーについて理解したところで、Googleタグマネージャーインターフェースを使用して変数の1つを読み取ってみましょう。

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

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

Step 1− Googleタグマネージャインターフェースで、変数に移動します。ユーザー定義変数まで下にスクロールします。[新規]をクリックします。

Step 2 −この新しい変数に名前を付けて、varEventと呼びましょう。

Step 3 − [変数タイプの選択]をクリックしてセットアップを開始します…

Step 4 −リストから[データレイヤー変数]を選択します。

Step 5 − [データレイヤー変数]を選択するときは、名前とバージョンを入力する必要があります。

この名前は、Googleタグマネージャーの実際のデータレイヤーに由来します。前述のように、追跡する変数は–イベントです。

Step 6 −データレイヤー変数名にイベントを入力します。

Step 7 − [保存]をクリックします。

Step 8 − [プレビュー]をクリックして、デバッガーに反映された変更を確認します。

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

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

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