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

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

Contents

1 データレイヤーへPushする方法
2 データレイヤーに関する注意点
3 Pafit Analycy（データ収集機能）のご紹介

データレイヤーへ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 -->

Pafit Analycy（データ収集機能）のご紹介

Pafit株式会社ではウェブサイトのデータ収集を簡単にするためのサービスを開発しています。
現在、事前登録受付中となります。

以下のような特徴を持っています。

1. Data Layer用の情報のPushをサポート
商品IDや商品名、料金などをData LayerにPushすることをサポートします。
2. ウェブサイトのGoogleタグマネージャーの設定を簡略化
本サービスで一括設定できるタグマネージャーのタグ・トリガー・変数の合計数は100を超え、設定時間を大幅に短縮できます。
3. Googleアナリティクスや各広告サービスにおけるデータ収集をサポート
各サービスで商品の閲覧・カート追加・購入データなどを記録できるようになり、売上向上のためのデータ分析や広告配信の最適化に役立ちます。

以下のページで事前登録を受け付けております。