530 人が現在オンライン
530 人が現在オンライン
Google アナリティクスのアカウント設定、プロパティ、ビューやフィルタ設定などについて、ユーザー同士で意見交換ができます。解析を通して浮かんだ質問やアイディアを投げかけ合って、よりデータ分析の知識を高めていきましょう。
ガイドを表示
star_border
返信

GTMの発火タイミングとデータレイヤ変数の更新タイミングについて

初級者 ✭ ✭ ✭

とあるボタンが押されたときに、以下の2つの動作が行われるとします。

1. dataLayer.push({'hoge':'hogehoge'})

1. GTMでボタンのクリックを検知してタグ発火

 

このとき、タグには、dataLayerに送り込んだhogeの値を入れ込みたいのですが、

この場合、dataLayer.pushが必ず先に実行されて、その後にGTMのタグ発火になるのでしょうか?


想定しているユースケースとしては、

ECサイトで、複数の商品を閲覧できるページにおいて、

商品の下についている「カートに入れるボタン」が押された時、

dataLayer.push({'itemId : 11111'})

で随時itemIdを書き換え、

GTMでのタグ発火時にデータレイヤの変数itemIdを入れ込みたい

というイメージです。

 

目論見通り、先にdataLayer.pushが動き、その後GTM発火となるのでしょうか?
それとも、そうでもないのでしょうか?

そうでない or この方法は推奨できない場合、別の方法があればお教えいただきたく思います。

1 人のエキスパートが返信verified_user

受理された解決策
ベストアンサーのマーク済み.
解決策
トピック作成者Satoshi Sさんが付与
3月

Re: GTMの発火タイミングとデータレイヤ変数の更新タイミングについて

トップコントリビューター

今回のケースの場合、2つの処理順序をコントロールすることは難しいと思います(どちらが先になるかは都度変わる)。

 

もし、

<button onclick="javascript&colon; dataLayer.push({ itemId: 123 });">カートに入れる</button>

みたいな処理をしたいのであれば、HTMLでは上記の代わりに

<button data-itemId="123">カートに入れる</button>

としておき、GTMの変数で

「自動イベント変数>要素の属性」で属性名に「itemId」を指定

した変数を作成すれば、動作しますので、こちらをお使いください。

 

元の投稿で解決策を見る


すべての返信

Re: GTMの発火タイミングとデータレイヤ変数の更新タイミングについて

[ 編集済み ]
セミ プロフェッショナル ✭ ✭

こんにちは。

 

dataLayerのコードがGTMのタグより上にあれば大丈夫です。

 

逆にdataLayerのコードがGTMのタグより下にあると上手く動かないと、マニュアルには書いていますね。

 

Developer Guide  |  Google Tag Manager for Web Tracking  |  Google Developers

Incorrect

<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->
<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>

Note: If you put the Google Tag Manager container snippet above the dataLayer array, Google Tag Manager may malfunction, and will not be able to read the variables defined in the array.

Correct

<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>
<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->

ただ、dataLayerのイベントは別です。イベントはクリック時などに発火させることもあり、任意のタイミングで実行されるものだからです。あくまであらかじめ用意しておく変数だけですね。

 

あとは蛇足かもしれませんが、GTMのタグでカスタムHTMLにdataLayerのコードを入れても、私の環境の場合は動いてます。

実際のところタイミングによっては動いたりするものかもしれませんが、ご参考になれば幸いです。

Re: GTMの発火タイミングとデータレイヤ変数の更新タイミングについて

初級者 ✭ ✭ ✭
ご回答ありがとうございます。

私の場合ですと、ページ読み込み時にdataLayerの変数を指定したいのではなく、
ボタンが押される毎にdataLayerの変数のitemIdを更新することを考えております。
ですので、上記のヘルプは当たらないかと考えておりますが、この場合でも上記のヘルプのとおりなのでしょうか?

ボタンを押すと同時にdataLayerにpushするのと、GTMの発火タイミングの前後関係を知りたいのですが、お分かりになりますか?
ベストアンサーのマーク済み.
解決策
トピック作成者Satoshi Sさんが付与
3月

Re: GTMの発火タイミングとデータレイヤ変数の更新タイミングについて

トップコントリビューター

今回のケースの場合、2つの処理順序をコントロールすることは難しいと思います(どちらが先になるかは都度変わる)。

 

もし、

<button onclick="javascript&colon; dataLayer.push({ itemId: 123 });">カートに入れる</button>

みたいな処理をしたいのであれば、HTMLでは上記の代わりに

<button data-itemId="123">カートに入れる</button>

としておき、GTMの変数で

「自動イベント変数>要素の属性」で属性名に「itemId」を指定

した変数を作成すれば、動作しますので、こちらをお使いください。

 

Re: GTMの発火タイミングとデータレイヤ変数の更新タイミングについて

初級者 ✭ ✭ ✭
なるほど!
これでできそうです。
ありがとうございます!!!

Re: GTMの発火タイミングとデータレイヤ変数の更新タイミングについて

[ 編集済み ]
セミ プロフェッショナル ✭ ✭

Satoshi S さん

 

そうでした、クリック時ですよね。何を見てたんだろう(^_^;

dataLayer.pushが後になるので無理ですよね・・・、すみません。

このトピックのエキスパート
山田 良太