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つだけの場合）
●データレイヤー変数の書式（複数の場合は間を「,」で区切る）
「hogehoge」の部分にデータレイヤー変数の名称を、「:」の右側に渡したい値を記述します。複数のデータレイヤー変数に一度に値を渡したい場合は、間を「,」（カンマ）で区切ってまとめて記述することもできます。最後に「,」は必要ありません。
この形に見覚えがある人もいるのではないでしょうか？ そうです、これは4-7で解説したEvent変数の値を書き換える方法とまったく同じものです。このときは「event」という名称の変数に値を渡すように記述しましたが、ここでは自分で変数名を指定します。
なお、データレイヤー変数は上記のJavaScriptが実行されたタイミングで、Googleタグマネージャに値が渡されます。ですので、JavaScriptを記述するのはGoogleタグマネージャのタグよりも前がいいでしょう。具体的には、headタグ内が場所も早く、後から見たときも見つけやすいのでおすすめです。
受け取るためのデータレイヤー変数を作成する
HTML側にデータレイヤー変数を渡す記述が準備できたら、Googleタグマネージャ側でそれを受け取る変数を登録します。変数の新規登録画面を表示して「変数の選択」で「データレイヤーの変数」を選択します。「データレイヤーの変数名」にHTMLに記述したデータレイヤー変数名（例であれば「hogehoge」など）を入力して「変数を作成」をクリックします。
HTML側に前述のJavaScriptが記述されていない場合や値が渡される前にGoogleタグマネージャが呼び出されてしまった場合など、値を取得できなかったときの初期値を設定したいのであれば「デフォルト値を設定」というオプションに入力します。あとは、任意のタグの項目の値やトリガーの条件にここで作成したデータレイヤー変数を選択すれば、HTMLからJavaScriptで出力された値を利用できるようになります。
データレイヤー変数のもう1つのメリット
データレイヤー変数には、前述の「第三者が見てわかりやすい」という理由以外にもメリットがあります。それは、「特定のデータレイヤー変数名を設定すれば、特定のタグやツールである機能が使えるようになる」ことです。例えば、GoogleアナリティクスのEコマースタグでは「transactionId」「transactionTotal」「transactionProducts」といったデータレイヤー変数名を使います。これらはあらかじめ決められていて、それぞれ「Eコマースタグで利用する値が入ってますよ」という意味があるのです。こうした最初から利用用途が宣言されているものを「予約語」といいます。
予約語のデータレイヤー変数は、対応するタグを登録しない限り関係はありませんが、その場合でもできれば意図通りの使い方をした方がいいでしょう。予約語は、Eコマースタグで決められているもの以外にもいくつかあるので、気になる場合は以下のサイトを確認ください。英語ですが、Googleが開発者向けに公開している公式の情報を確認できます。
https://developers.google.com/tag-manager/reference
最後に繰り返しになりますが、あくまでデータレイヤー変数は「ぱっと見て利用用途がわかりやすいデータの渡し方」になります。ただ、独自の書式になっているため、ほかの変数に比べると少々わかりづらい面もあるかもしれません。公式に推奨されているとはいえ、もしほかの変数として登録が可能であれば、無理にデータレイヤー変数を使うことにこだわる必要はありません。自分にとって使いやすい手段を選びましょう。
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：Googleタグマネージャに自在にデータを渡す「データレイヤー変数」（全20回の19） | 実践 Googleタグマネージャ入門 | Web担当者Forum
Copyright (C) IMPRESS CORPORATION, an Impress Group company. All rights reserved.
畑岡大作（はたおかだいさく）
アユダンテ株式会社、マークアップエンジニア。モバイルサイトの運営アシスタントからパソコン向けWebサイトの運営・制作までを経て、2008年よりアユダンテ株式会社に入社。現在はHTML+CSSのマークアップエンジニアとして、SEOコンサルティングの一環であるHTMLテンプレート作成、および自社サイトの運営から制作まで携わるほか、Googleタグマネージャの導入支援や設定サポートなどにかかわる。