こんにちは。スプマロです（@649Ga4）
この記事ではデータレイヤーを使って、ページのDOM要素を取得する方法について説明します。
この方法を知ることで、例えばクリックした要素の親タグに付与されている「id」や「class」などを取得することができます。
javascriptが書ける方は「カスタムjavascript変数」を使えばよいのですが、多くの方にはハードルが高いのかなと思います。
今回説明する方法は、javascriptの知識が無くても使えますので安心してください。
(ただ、javascriptを知るとGTMの世界が広がるので興味ある方はどんどん使いましょう)
データレイヤーがそもそもわからない方は、事前にこちらの記事を見ていただくと理解が深まるかと思いますので、ご一読ください。
それでは早速見ていきましょう！
プレビューモードでデータレイヤーに格納されているデータを確認する
GTMタグが読み込まれると、データレイヤーには随時データが追加/更新されていきます。
例えば、以下のサンプルコードを見てください。リンクがaタグで設置されていますね。
<div id="parentID">
<a href="children.html"> childrenNode </a>
</div>
GTMの「リンクのみトリガー」を作成して、クリックした場合のプレビューモードを見てみましょう。
このようにデータレイヤーは、インタラクション(リンクのクリックなど)を検知するたびにデータレイヤーにデータを追加/更新しています。
GTMのすべてのタグ/トリガー/変数はこのデータレイヤーに追加されたデータを参照しています。
でもここまで見ていただいた方はこう思ったかもしれません。
ここからが本記事のポイントです。
実はプレビューモードでは、データレイヤーの全データを見ることはできません。
隠されている膨大な量のデータに私たちはアクセスをすることができます。その方法は次の章で説明しますね。
開発者ツールでデータレイヤーに格納されている全データを確認する
データレイヤーのより詳細なデータを見るには、開発者ツールでコンソールを使用します。今回はchromeで説明をします。
手順としては以下になります。
- GTMが設置されているページを開いて、「F12」キー、もしくは右クリック>「検証」をクリックします。
- 「Console」を開きます。
- Console画面で、「dataLayer」と打ち込んでEnterキーを押します。
- 黒い三角形を押して展開します。
表示されたリストが、データレイヤーに追加されているすべてのデータです。黒い三角形を押していくと深い階層まで情報にアクセスできます。
このデータはデータレイヤー変数で取得することができます。
活用例：クリックした要素の親タグに付与されているidを取得する
それでは実際の活用事例を見ていきましょう。
今回のお題は「クリックした要素の親タグに付与されているidを取得する」です。
クリックした要素のidやclassは、「Click ID変数」や「Click Classes変数」で取得することができます。
ただ、親要素となると既存の変数では取得することはできません。
ここではデータレイヤー変数を使って、親タグのidを取得する方法を説明します。
サンプルコードは以下になります。
<div id="parentID">
<a href="children.html"> childrenNode </a>
</div>「リンクのみ」トリガーが1つでも有効になっている必要があります。
それではサンプルコードのリンクをクリックした場合の、データレイヤーの中身を開発者ツールで見ていきましょう。
データレイヤーに、「gtm.linkclick」イベントが追加されているのがわかりますね。黒い三角形を押すと展開されます。
いくつかの項目がありますが、今回注目するポイントは、「gtm.element」です。黒い三角形を押してさらに展開していきましょう。
「gtm.element」の中には膨大なデータがあり、親要素のデータも格納しています。一覧の中から「parentElement」を探しましょう。下の方にあります。
「parentElement」キーを展開すると、親要素についての情報が表示されます。この中に「id」キーがあるのを見つけてください。
見つけれましたでしょうか？
あとはデータレイヤー変数を作成して、このキーまでのパスを入力することで値（例ではparentID）を取得することができます。
パスは、展開してきたキーを「.(ドット)」でつなげることで定義できます。
今回の例では、「gtm.element」＞「parentElement」＞「id」で展開してきましたので、パスは「gtm.element.parentElement.id」となります。
データレイヤーの作成例はキャプチャの通りです。
[変数]>ユーザー定義変数の[新規]>[データレイヤーの変数]を選択
変数を作成したらプレビューモードで見てみましょう。リンクをクリックして、先ほど作成したデータレイヤー変数を確認します。
無事、親要素のid情報を取得することができました！
取得した情報は、トリガーの条件に使ったり、イベントタグなどに使うことができます。
他にも、最初の子要素のテキスト情報を取得する場合は、「gtm.element.firstChild.innerText」のパスで取得することができるなど、活用方法は色々とあります。
まとめ
この記事ではデータレイヤーを使って、ページのDOM要素を取得する方法について説明をしました。
データレイヤー変数は、カスタム実装で追加した情報だけではなく、自動でもたくさんの情報を取得することができます。
この方法を知っていれば、javascirptが書けなくても計測したいデータを取得することができるかもしれませんので、参考になれば幸いです。
最後までお読みいただき、ありがとうございます！
ご感想やご意見などがあれば、ぜひTwitterまでご連絡ください。
