GTMでESCキーの押下をカスタムイベントとして検出する方法を解説します

アイキャッチ

今回はGoogleタグマネージャーでESCキーが押下されたことをカスタムイベントとして検出し、ESCキーが押下をトリガーにタグ発火させる方法を解説します。

目次

手順1 ESCキー押下のカスタムイベントを実装する

まず、ESCキーが押下された際、カスタムイベントをデータレイヤーにプッシュするタグを作成します。

タグ作成

まずカスタムHTMLタグに以下のコードを記述します。

<script>
document.addEventListener('keydown', function(e) {
  if(e.key === 'Escape'){
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'escape_pressed'
    });
  }
});
  </script>

このコードの意味は

ESCキーが押下された際にデータレイヤーにescape_pressedというカスタムイベントをプッシュする

というものになります。

GTMのタグ設定は以下の画像のようになりますね。

GTM

トリガー作成

次にトリガーを作成します。

ESCキー押下を検出したいページを指定してページビュートリガーを作成しタグに紐付けます。

今回は例として全ページでタグが発火するように設定します。

こうすることで、広告のベースコードのように任意のページにスクリプトを設置することができます。

これでESCキーが押下された際に「escape_pressed」というカスタムイベントが発生するよう実装できました。

あとはescape_pressedを条件にカスタムイベントトリガーを作成し、任意のタグに紐付ければ完成です。

GTM

手順2 ESCキーが押下された時に発火させたいタグを作成する

ESCキーが押下された際に発火させたいタグを作成します。

今回はテストとしてESCキーが押下された際に以下のタグが発火するように設定します。

GTM

ESCキーが押された回数をpush_escape_eventとして収集しています。

カスタムイベントトリガーを作成する

以下のとおりカスタムイベントトリガーを作成します。

GTM

このトリガーの意味は「escape_pressedのイベントが発生したタイミングでタグを発火させる」

です。

タグとトリガーを紐付ける

次に発火させたいタグに先ほど作ったトリガーを紐付けます。

GTM

これで完成です!

プレビューで確認する

では、タグが完成したのでプレビューで確認してみます。

ESCキーを押下すると…

GTM

画像のとおり、esc_downイベントが発生しています。

そして

GTM

タグも無事発火していますね!

さいごに

今回は標準であれば存在しないESCキーの押下をカスタムイベントで検出する方法を解説しました。

このノウハウがサイト分析に役立てられれば幸いです。

ブログランキング・にほんブログ村へ

ミミズク マーケティングに相談する

ミミズク マーケティングではウェブマーケティングに関するのお仕事をリーズナブルな価格で承っております。

ご興味を持っていただけましたら、サービス一覧をご参照いただけますと幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Web制作会社に所属するウェブマーケター
Web広告、Webサイトのアクセス解析、SEOコンサルが主な業務。
数千ページのコンテンツを有する大企業から中小企業まで様々なクライアントのウェブマーケティング支援を担当している。
クラウドソーシングサイト「ランサーズ」で認定ランサーとしても活動中。

目次