GTMでカスタムイベントを使用する際でも「Click Element」等の組み込み変数を用いたいことがあります。データレイヤー変数を用いて任意に設定することが可能です。

イベントの発生時に同時に以下のような情報を送信します。

window.dataLayer.push({
  event: 'eventName', // イベント名
  'gtm.element': element, // 文字列ではなくDOM要素を指定する。Click ElementまたはForm Element
  'gtm.elementClasses': 'classes', // Click ClassesまたはForm Classes
  'gtm.elementId': 'id', // Click IDまたはForm ID'
  'gtm.elementTarget': 'target', // Click TargetまたはForm Target
  'gtm.elementUrl': 'https://example.com/', // Click URLまたはForm URL
  'gtm.videoProvider': 'youtube', // 'Video Provider'
  'gtm.videoUrl': 'https://youtu.be/', // 'Video URL'
  'gtm.videoTitle': 'タイトル', // 'Video Title'
  'gtm.videoDuration': 100, // 'Video Duration'
  'gtm.videoPercent': 10, // 'Video Percent'
  'gtm.videoVisible': true, // 'Video Visible'
  'gtm.videoStatus': 'play', // 'Video Status'
  'gtm.videoCurrentTime': 10, // 'Video Current Time'
  'gtm.scrollThreshold': 10, // 'Scroll Depth Threshold'
  'gtm.scrollUnits': 'percent', // 'Scroll Depth Units'
  'gtm.scrollDirection': 'vertical', // 'Scroll Direction'
  'gtm.visibleRatio': 30, // 'Percent Visible'
  'gtm.visibleTime': 1000 // 'On-Screen Duration'
});

Click TextまたはForm Textの値は"gtm.element"要素で指定されたDOM要素から生成されます。

注意すべき項目としては、{gtm: {element: element}} ではなく{'gtm.element': element}とピリオドでオブジェクトを分割せず、一つのキーとして用いる必要があるということです。これは各組み込み変数がデータレイヤー変数バージョン１によって利用されていることに起因します。

ユースケース

「すべての要素」クリックトリガーを有効にすると、全ページの全要素のクリックのたびにイベントが発生するようになります。デバッグの際などで邪魔ですし、意図せずサイトに負荷をかけてしまうこともあります。その代わりにカスタムイベントをカスタムHTMLタグ等で追加することで、必要なタイミングでのみイベントを発生させることができます。

ただし、その場合は組み込み変数がデフォルトでは有効になりません。別途データレイヤー変数を追加して対応させることが一般的ですが、このような方法があることを頭に入れておいてもよいでしょう。