データレイヤーにイベントをpushする方法と注意点

この記事ではデータレイヤー（Data layer）にイベントなどの情報をPushする方法をご紹介します。

データレイヤーへPushする方法

データレイヤーへPushする際のコードは以下のようになります。

dataLayer.push({'event': 'event_name'});

以下では注意点や前処理を説明します。

前処理：コードスニペットの用意

データレイヤーへPushする前に以下のようなコードスニペットを用意します。
からのオブジェクトを用意し、この中に様々な情報をPushします。

<script>
    window.dataLayer = window.dataLayer || [];
</script>

前処理：オブジェクトの初期化

状況にあわせてオブジェクトを初期化します。
以下のコードではecommerceの内容を初期化しています。

dataLayer.push({ ecommerce: null });

例えば、同じページでデータレイヤーに情報を2回Pushする際に初期化することで、意図しないデータが残っていることを防ぎます。
データレイヤーにPushする際は基本的に初期化することをオススメします。

データレイヤーへ情報をPush

例えば、商品ページが表示されたタイミングでデータレイヤーにPushする場合、以下のようなコードになります。
ecommerceで囲んでおくことで、初期化しやすくなっています。
また、eventはGTMのカスタムイベントトリガーを利用する際に利用されます。

dataLayer.push({
  event: "view_item",
  ecommerce: {
    currency: "JPY",
    items: [{
      item_name: "T-Shirt",
      item_id: "1234",
      price: 1000
    }]
  }
});

前処理のコードも含めると以下のようになります。

< script > 
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "view_item",
  ecommerce: {
    currency: "JPY",
    items: [{
      item_name: "T-Shirt",
      item_id: "1234",
      price: 1000
    }]
  }
});
< /script>

データレイヤーに関する注意点

• データレイヤーにPushする際はオブジェクトを初期化し、前のデータを削除するようにしましょう。
  • 意図しないデータがGTMなどで利用されることを防ぎます。
• GTMのプレビューモードを使いながら、データが正しくPushされているか、前のデータが残っていないかを確認するようにしましょう。
  • 前のデータが残っていることで、GTMに設定されたタグで正しく計測されないことを防ぐ必要があります。
• Googleタグマネージャーのコンテナスニペットより上に、データレイヤーに関するコードを記述しましょう
  • Googleタグマネージャーでデータレイヤー変数を適切に扱うために、このような対策が必要になります。

以下のような記述になります。

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "view_item",
  ecommerce: {
    items: [{
      item_name: "T-Shirt"
    }]}});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->