Googleタグマネージャーで親階層のタグのidやclassを使用する方法

Pocket

Googleタグマネージャーを使っていて、なかなかクリックイベントが取れないときに、試す方法です。
例1:親のidを使用するとき

  1. <div id=”oya”>
  2.    <a href=”#”>foo</a>
  3. </div>

Googleタグマネージャーで、下記のように変数を作成して使用します。
ユーザー定義変数
変数名:offset.Parent.id(など任意につける)
データレイヤーの変数
変数名:gtm.element.parentElement.id
データレイヤーのバージョン:バージョン2

そして、トリガーで、
リンク>すべての要素
を選び、
条件指定で、この変数「offsetParent.id」が「oya」と「等しい」という条件を指定します。
あとは通常通りに、タグを設定します。

同様に、親の親のidを指定する場合は、下記です。

  1. <div id=”oya-oya”>
  2.    <div class=”oya”>
  3.       <a href=”#”>baa</a>
  4.    </div>
  5. </div>

ユーザー定義変数
変数名:offset.ParentParent.id(など任意につける)
データレイヤーの変数
変数名:gtm.element.parentElement.parentElement.id
データレイヤーのバージョン:バージョン2

これで、例えば<a>タグのpaddingなどがかかっていて、親や親の親のタグ部分をクリックしたくても、うまくクリックできないときになどに、利用できます。

なお、これが使えるかどうかの確認方法ですが、

タグマネージャーで「プレビューモード」にしたときに表れる画面で確認できます。

(下図)

Googleタグマネージャーでクリックイベントがとりにくい時

①調べたい個所をクリック

②gtm.clickで該当のものを選択

③Variablesを見る

④idやclassなどが空であるなどし、使えない場合は、

offsetParent.id、もしくはoffsetParentParent.id

を使えないか確認する。

以上となります。ご参考まで。