Google Tag Manager(GTM)でDOMの準備が完了後、複数の回Eventを飛ばす

タイトルはうまく付けられなかったのですが、ある特定の1ページを読み込んだ時にdataLayerを読み込んで、例えばカスタム変数として処理を行う事は簡単に行えます。

例えば、こんなdataLayerをページ内に埋め込んでおいて、Analytics側とGTM側でカスタム変数を設定しておけば問題ありません。

dataLayer = [{
'custom1': '1',
'custom2': '2',
'custom3': '3'
}];

で、今回実現したかったのは、

dataLayer = [{
  'statusCode': ['500','502','503']
}];

のような配列データをGoogle Analyticsへ送りたいということでした。
例えば、ある特定の商品がAカテゴリ、Bカテゴリ、Cカテゴリなどに所属していた場合、こんなデータをAnalytics側に通知して、どの延べのデータになりますが、どのカテゴリが一番注目度を集めていたかということを集計したい。といった感じです。

dataLayer = [{
  'productCategory': ['500','502','503']
}];

実際、私のニーズもそれにかなり近いものではありますが、この場合データをカンマ区切りで、例えばこんな感じでdataLayerを設定することは直ぐに出来ます。

dataLayer = [{
  'productCategory': '500,502,503'
}];

ですが、この方法はあとで集計がとても面倒くさい。
できれば配列でデータを渡して、シンプルに集計をしたい。。。

そこで、色々調べてみたのですが、カスタム変数にこのようにデータを渡すと最初の1つしかAnalyticsには入ってきませんでした。

dataLayer = [{
  'productCategory': '500’,
  'productCategory':  '502',
  'productCategory':  '503'
}];

ということで同じ変数を複数並べて取得するという方法は失敗。
で、どうやらEventを使って取得は可能だということで、実際やってみたら成功しました。
海外では結構実践されているようです。いくつか方法があって、これから紹介するやり方よりも全然単純なやり方もあるようです。

まず私のやり方ですが、ページ側には以下の様な配列を置いておきます。

dataLayer = [{
  'productCategory': ['500','502','503']
}];

もちろん事前に「productCategory」というデータレイヤー変数を定義しておいてください。
そして、Eventを飛ばすのに使うものはタグの「Custom HTML Tag」で、こんなものを書きます。

var modelCode = [];
  var productCategoryList = {{productCategory}};
        productCategoryListCnt = productCategoryList.length;
  for(var i = 0; i < productCategoryListCnt; i++) {
    dataLayer.push({'event': '●●Event名●●', 'eventAction': '●●Action名●●', 'eventLabel': productCategoryList[i] });
  }

見れば非常に簡単ですよね。
マクロの変数名「productCategory」の値を読み込んで、あとは普通のjavascriptです。

ただし！発火条件に注意！
この「Custom HTML Tag」は全てのTagの発火が終わった後に読み込む必要があります。
それを実現する方法はGoogleのオフィシャルヘルプに記載されています。

DOM の準備ができた時点でタグを配信するよう定義するには、配信ルールに「イベントが gtm.dom と等しい」という条件を追加します。

という部分と、一番最後に書かれているこの1文。

window.onload でタグを配信するよう設定するには、「イベントが gtm.dom と等しい」という条件を使用します。

私も後で知っただけなのですが。
即ち、英語版ですが、こんな設定のルールを用意して、それを発火条件とします。

これで完了！
dataLayer.pushを利用しているので、イベントの受け口もちゃんと用意していただければ、1アクセスで配列データ分Eventが発火します。

GTMが出た時にこういう条件設定が出来ると聞いてはいたのですが、いままでちゃんと調べずにいました。

【参考】
Google Tag Managerに関するまとめ