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変数にあたりますが、独自の書式になっているため、ぱっと見ただけで「これはデータレイヤー変数だ」というのが誰にでもわかりやすくなっています。以下の書式を見てください。</script>「hogehoge」の部分にデータレイヤー変数の名称を、「:」の右側に渡したい値を記述します。複数のデータレイヤー変数に一度に値を渡したい場合は、間を「,」(カンマ)で区切ってまとめて記述することもできます。最後に「,」は必要ありません。これは4-7で解説したEvent変数の値を書き換える方法とまったく同じものです。このときは「event」という名称の変数に値を渡すように記述しましたが、ここでは自分で変数名を指定します。データレイヤー変数は上記のJavaScriptが実行されたタイミングで、Googleタグマネージャに値が渡されます。JavaScriptを記述するのはGoogleタグマネージャのタグよりも前がいいでしょう。具体的には、headタグ内が場所も早く、後から見たときも見つけやすいのでおすすめです。受け取るためのデータレイヤー変数を作成するHTML側にデータレイヤー変数を渡す記述が準備できたら、Googleタグマネージャ側でそれを受け取る変数を登録します。変数の新規登録画面を表示して「変数の選択」で「データレイヤーの変数」を選択します。「データレイヤーの変数名」にHTMLに記述したデータレイヤー変数名(例であれば「hogehoge」など)を入力して「変数を作成」をクリックします。「変数の選択」で「データレイヤーの変数」を選択し、「データレイヤーの変数名」にHTMLに記述したデータレイヤー変数名を入力する。HTML側に前述のJavaScriptが記述されていない場合や値が渡される前にGoogleタグマネージャが呼び出されてしまった場合など、値を取得できなかったときの初期値を設定したいのであれば「デフォルト値を設定」というオプションに入力します。あとは、任意のタグの項目の値やトリガーの条件にここで作成したデータレイヤー変数を選択すれば、HTMLからJavaScriptで出力された値を利用できるようになります。データレイヤー変数のもう1つのメリットデータレイヤー変数には、前述の「第三者が見てわかりやすい」という理由以外にもメリットがあります。それは、「特定のデータレイヤー変数名を設定すれば、特定のタグやツールである機能が使えるようになる」ことです。GoogleアナリティクスのEコマースタグでは「transactionId」「transactionTotal」「transactionProducts」といったデータレイヤー変数名を使います。これらはあらかじめ決められていて、それぞれ「Eコマースタグで利用する値が入ってますよ」という意味があるのです。した最初から利用用途が宣言されているものを「予約語」といいます。予約語のデータレイヤー変数は、対応するタグを登録しない限り関係はありませんが、その場合でもできれば意図通りの使い方をした方がいいでしょう。予約語は、Eコマースタグで決められているもの以外にもいくつかあるので、気になる場合は以下のサイトを確認ください。英語ですが、Googleが開発者向けに公開している公式の情報を確認できます。Developershttps://developers.google.com/tag-manager/reference最後に繰り返しになりますが、あくまでデータレイヤー変数は「ぱっと見て利用用途がわかりやすいデータの渡し方」になります。独自の書式になっているため、ほかの変数に比べると少々わかりづらい面もあるかもしれません。公式に推奨されているとはいえ、もしほかの変数として登録が可能であれば、無理にデータレイヤー変数を使うことにこだわる必要はありません。自分にとって使いやすい手段を選びましょう。Googleタグマネージャ入門』の一部をWeb担の読者向けに特別公開しているものです。本書は「Googleタグマネージャ」を解説する国内初の書籍です。Googleタグマネージャ認定パートナーのアユダンテ株式会社が、基礎知識から実際の設定方法までをていねいに解説。仕組みや基本的な考え方を理解できるよう、ひと通りの機能を網羅します。2014年10月にリニューアルされた新インターフェースに完全対応。アクセス解析、リスティング広告、リマーケティングタグなどを日々扱うWeb担当者の方、またはWebサイトを管理しているシステム担当者の方に「今」おすすめの一冊です。畑岡大作(はたおかだいさく)アユダンテ株式会社、マークアップエンジニア。モバイルサイトの運営アシスタントからパソコン向けWebサイトの運営・制作までを経て、2008年よりアユダンテ株式会社に入社。現在はHTML+CSSのマークアップエンジニアとして、SEOコンサルティングの一環であるHTMLテンプレート作成、および自社サイトの運営から制作まで携わるほか、Googleタグマネージャの導入支援や設定サポートなどにかかわる。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!私は変人コレクター。CEM」の提供を開始LINEのマーケ活用術――ナーチャリングからリピーター醸成まで解説するセミナー2/20開催MaaSが普及したら「自家用車を手放すことを検討する」48%【アクセンチュア調べ】2019年にもっとも注視されたテレビCMは、クボタ「壁がある。教育系】自社WEBサイトの運営および企画提案、リスティング広告・SNS広告などの広告出稿を中心に担当いただきます。2/19(水)@ステーションコンファレンス東京リピーターを呼び込む「究極の集客方法」。リピーターを呼び込む「究極の集客方法」。2019年12月すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。