実践Googleタグマネージャ入門 実践 Googleタグマネージャ入門

GTM dataLayer(データレイヤー)変数の使い方とは?(全20回の19)

GTM(Googleタグマネージャー)のdataLayer.pushから始まるデータレイヤー変数は、JavaScript変数に比べてどんなメリットがあるのでしょうか。データレイヤー変数の基本の使い方からGoogleアナリティクスの「transactionId」「transactionTotal」「transactionProducts」といったEコマースで使われるデータレイヤー変数についても紹介。
書籍の5-5<データレイヤー変数>より(このコーナーでは、電子書籍『実践 Googleタグマネージャ入門』の内容の一部を、Web担の読者向けに特別にお届けしています)

Googleタグマネージャにデータを渡す「データレイヤー変数」

ここまで、変数を使ってHTML内のテキストやリンク先URL、Cookieの値などをGoogleタグマネージャに送る方法をいくつか解説してきました。5-1のDOM要素や5-2のJavaScript変数で登録可能な形であれば、その方法を利用すればいいわけです。しかし、HTML内にその情報自体が含まれていない場合など、それらの方法では値を送れない場合もあります。その場合、データを送るためのJavaScriptを用意する必要があります。その方法には「データレイヤー変数」を使う方法と、「カスタムJavaScript」を使う方法の2つがあります。

5-1でも触れたように、後者のカスタムJavaScriptはハードルも高く、後々Webページの内容が変更されたときに動作しなくなる可能性もあるためあまりおすすめできません。ここでは、前者のデータレイヤー変数を使ってGoogleタグマネージャに意識的に値を渡す方法を解説します。データレイヤー変数は、HTMLからGoogleタグマネージャにデータを送る方法としてGoogleが公式に推奨している仕組みです。

データレイヤー変数を使うメリット

1つ押さえておきたいのは、値を渡すことだけであれば、無理をしてデータレイヤー変数を使わなくてもいいということです。例えば、該当箇所のHTMLタグにid属性を記述できるならDOM要素として、JavaScript変数としてHTMLに値を書き出せるならJavaScript変数としてそれぞれ変数を使って登録できます。

ただ、これらの方法には問題もあります。このようなHTMLの場合、第三者がHTMLを見ただけでは「このJavaScript変数は何に利用しているのか?」「なぜこの部分のところだけをわざわざspanタグで囲っているのか?」など、利用意図がわかりません。「必要なさそうだ」という判断で、削除されてしまう危険性もあります。データレイヤー変数は、「第三者が見たときに目的がわかりやすい」というメリットがあり、そうした事態を防ぐための解決策でもあります。

送るためのJavaScriptをHTMLに記述する

データレイヤー変数は、Googleタグマネージャに値を渡すために設計された変数で、値を渡す手段として公式に推奨されている変数です。実態としてはJavaScript変数にあたりますが、独自の書式になっているため、ぱっと見ただけで「これはデータレイヤー変数だ」というのが誰にでもわかりやすくなっています。まずは、以下の書式を見てください。

●データレイヤー変数の書式(1つだけの場合)

<script> dataLayer.push({'hogehoge': '渡したい値'}) </script>

●データレイヤー変数の書式(複数の場合は間を「,」で区切る)

<script> dataLayer.push({ 'hogehoge1': '渡したい値', 'hogehoge2': '渡したい値', 'hogehoge3': '渡したい値' }) </script>

「hogehoge」の部分にデータレイヤー変数の名称を、「:」の右側に渡したい値を記述します。複数のデータレイヤー変数に一度に値を渡したい場合は、間を「,」(カンマ)で区切ってまとめて記述することもできます。最後に「,」は必要ありません。

この形に見覚えがある人もいるのではないでしょうか? そうです、これは4-7で解説したEvent変数の値を書き換える方法とまったく同じものです。このときは「event」という名称の変数に値を渡すように記述しましたが、ここでは自分で変数名を指定します。

なお、データレイヤー変数は上記のJavaScriptが実行されたタイミングで、Googleタグマネージャに値が渡されます。ですので、JavaScriptを記述するのはGoogleタグマネージャのタグよりも前がいいでしょう。具体的には、headタグ内が場所も早く、後から見たときも見つけやすいのでおすすめです。

受け取るためのデータレイヤー変数を作成する

HTML側にデータレイヤー変数を渡す記述が準備できたら、Googleタグマネージャ側でそれを受け取る変数を登録します。変数の新規登録画面を表示して「変数の選択」で「データレイヤーの変数」を選択します。「データレイヤーの変数名」にHTMLに記述したデータレイヤー変数名(例であれば「hogehoge」など)を入力して「変数を作成」をクリックします。

v20505a
「変数の選択」で「データレイヤーの変数」を選択し、「データレイヤーの変数名」にHTMLに記述したデータレイヤー変数名を入力する。

HTML側に前述のJavaScriptが記述されていない場合や値が渡される前にGoogleタグマネージャが呼び出されてしまった場合など、値を取得できなかったときの初期値を設定したいのであれば「デフォルト値を設定」というオプションに入力します。あとは、任意のタグの項目の値やトリガーの条件にここで作成したデータレイヤー変数を選択すれば、HTMLからJavaScriptで出力された値を利用できるようになります。

データレイヤー変数のもう1つのメリット

データレイヤー変数には、前述の「第三者が見てわかりやすい」という理由以外にもメリットがあります。それは、「特定のデータレイヤー変数名を設定すれば、特定のタグやツールである機能が使えるようになる」ことです。例えば、GoogleアナリティクスのEコマースタグでは「transactionId」「transactionTotal」「transactionProducts」といったデータレイヤー変数名を使います。これらはあらかじめ決められていて、それぞれ「Eコマースタグで利用する値が入ってますよ」という意味があるのです。こうした最初から利用用途が宣言されているものを「予約語」といいます。

予約語のデータレイヤー変数は、対応するタグを登録しない限り関係はありませんが、その場合でもできれば意図通りの使い方をした方がいいでしょう。予約語は、Eコマースタグで決められているもの以外にもいくつかあるので、気になる場合は以下のサイトを確認ください。英語ですが、Googleが開発者向けに公開している公式の情報を確認できます。

v20505b
Reference - Google Tag Manager :Google Developers
https://developers.google.com/tag-manager/reference

最後に繰り返しになりますが、あくまでデータレイヤー変数は「ぱっと見て利用用途がわかりやすいデータの渡し方」になります。ただ、独自の書式になっているため、ほかの変数に比べると少々わかりづらい面もあるかもしれません。公式に推奨されているとはいえ、もしほかの変数として登録が可能であれば、無理にデータレイヤー変数を使うことにこだわる必要はありません。自分にとって使いやすい手段を選びましょう。

この記事は、Googleタグマネージャの初心者向け入門本となる電子書籍『実践 Googleタグマネージャ入門』の一部をWeb担の読者向けに特別公開しているものです。

実践 Googleタグマネージャ入門
時間を「劇的」に生み出すサイト修正不要のタグ管理術

本書は「Googleタグマネージャ」を解説する国内初の書籍です。Googleタグマネージャ認定パートナーのアユダンテ株式会社が、基礎知識から実際の設定方法までをていねいに解説。仕組みや基本的な考え方を理解できるよう、ひと通りの機能を網羅します。

2014年10月にリニューアルされた新インターフェースに完全対応。アクセス解析、リスティング広告、リマーケティングタグなどを日々扱うWeb担当者の方、またはWebサイトを管理しているシステム担当者の方に「今」おすすめの一冊です。

電子書籍『実践 Googleタグマネージャ入門』の中身や購入についてもっと見る
  • 実践 Googleタグマネージャ入門 時間を「劇的」に生み出すサイト修正不要のタグ管理術
  • 品種:電子書籍(リフロー形式/4.39MB)
  • 著者:畑岡大作(アユダンテ株式会社)著
  • 電子基準価格:1,000円+税(販売価格はストアにより異なる場合があります)
  • 発行:インプレス
  • 発売日:2014年11月10日
  • ページ数:160ページ
  • 書籍内容&販売サイト紹介
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

アップロード
手元のPCなどの機器から、ネットワークを介して、別のPCやファイルサーバー、ウェ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]