Googleタグマネージャーでドロップダウンメニューの値を取得する方法

2024年8月19日

今回は、弊社が運営している課金通話プラットフォーム「Port」のマーケティング活動をサポートするツールの一つであるGoogleタグマネージャーの実践ケース、「ドロップダウンメニューの値を取得」について紹介させていただきます。

Googleタグマネージャーは通常、コードを書く必要がありませんが、複雑なケースに対応するためにカスタムJavaScriptコードが必要になることもあります。これは、データレイヤーとのやり取りを行うためです。理論を読むだけでは曖昧に感じるかもしれないので、今回の記事で一緒に実践してみようと思います。

今回の内容は中級レベルで、 Googleタグマネージャーへの基本理解が前提となります。基本構成や導入方法について疑問がある方は、まず以下の2つの記事を読むことをお勧めします。

Googleタグマネージャーの基本概要まとめ

Googleタグマネージャーの導入方法

では早速ですが、本日の課題を見てみましょう！

1. 課題
2. 実践
3. 最後に
4. 参考資料

課題

Portオンラインモールの「出店者を探す」セクションには、並び順を選ぶドロップダウンメニューがあります（スマホ版のUIは下図）。ユーザーの好みを把握するために、各順序の選ばれた回数を統計したいと思います。

実践

ステップ１：ドロップダウンメニューのHTMLコードを確認

カスタムコードが必要かどうかに関わらず、まず課題となる要素のHTMLを確認することは重要です。PCのブラウザでページを右クリックし、「検証」を選択すればコードのウィンドウを呼び出せます。また、ドロップダウンメニューを選んで該当のコードを見つけることができます（下図参照）。

このコードを見てみると、1つの<select>タグの中に5つの<option>タグがあることがわかります。また、<select>タグにはjs_order_byというクラスとorder_byというidが設定されています。さらに、各<option>タグにはvalueという属性があり、デフォルトの「並び替え」以外の選択肢にはそれぞれ固有のvalueが設定されています。

ステップ２：データ取得のロジックを整理

設定を始める前に、一度課題と解決方法のロジックを整理してイメージできれば、これからは効率的に動けると思います。

目標：各順序の選ばれた回数を統計する

トリガー：ユーザーがある順序を選んだ際に発生するイベント

変数：選んだ順序の日本語文字列またはvalue属性の値

問題点：Googleタグマネージャーには「選んだ」というトリガータイプが存在しない

解決法：「順序を選んだ際に発生するイベント」をタグでカスタムする

ステップ３：カスタムイベントタグを作成しよう

「順序を選んだ際に発生するイベント」はトリガーとして使用したいですが、その定義はタグを使用します。ですので、ここはカスタムイベント「タグ」と呼びます。

まず、新規タグの「タグタイプを選択」ウィンドウで「カスタムHTML」を選択します。次は、表示されるコード入力スペースに以下のコードをコピーします。

<script> 
(function() { 
  // セレクトメニュー要素を取得 
  var selectMenu = document.querySelector('select#order_by'); 

  // セレクトメニュー要素が存在する場合、 changeイベントリスナーを追加 
  if (selectMenu) { 
    selectMenu.addEventListener('change', function(e) { 
      // changeイベントが発生したら、データレイヤーにイベント情報をプッシュ 
      window.dataLayer.push({ 
        event: 'onlineMallOrderSelected', 
        selectedElement: e.target.options[e.target.selectedIndex],
        selectedValue: e.target.value
      }); 
    }); 
  } 
})(); 
</script>

注意すべき点は4つあります：

1. var selectMenu = document.querySelector('select#order_by'); 
ここでは、selectMenuという変数（このコードの範囲でしか使用しません。Googleタグマネージャーの変数ではありません！）を定義し、その内容はidがorder_byの<select>要素にしています。ご自身のニーズに応じてidを調整してください。

2. selectMenu.addEventListener('change', function(e) { 
MDN Web Docsによると、『changeイベントは <input>, <select>, <textarea> 要素において、ユーザーが要素の値を変更したときに発行されます』。本例の「順序を選んだ際に発生するイベント」に当たっていますので、ここではchangeイベントを使用しています。必要に応じて、他のイベントに変更することも可能です。

3. event: 'onlineMallOrderSelected', 
ここでは「順序を選んだ」イベントのコード中の名前を指定しています。本例ではPortオンラインモールで使用しているためonlineMallを名前に入れました。ご自身のニーズに応じてイベント名を調整してください。

4. selectedElement: e.target.options[e.target.selectedIndex], 
   selectedValue: e.target.value 
順序の日本語文字列またはvalue属性の値の取得を目指しているため、selectedElementとselectedValueをデータレイヤーにプッシュしていますが、ニーズに応じて他の情報を追加することも可能です。望む値に合わせて設定してください。

そして、トリガーは目標ページのPVでも良いですし、if文でセレクトメニュー要素が存在する場合だけコードを実行するようにコントロールしているため、DOM Readyトリガーでも大丈夫です。

最後、読みやすいタグ名を入力します。例えば「表示順を選んだイベントリスナー」などとします。

これで、カスタムイベントタグの作成は完了です。

ステップ４：作成できたカスタムイベントタグをテストしてみよう

「プレビュー」ボタンをクリックし、目標ページのリンクを入力したら、Googleタグアシスタントで先ほど作成したイベントを確認することができます。

トリガーはPVまたはDOM Readyで設定したため、ページを開けた後すぐに発火したGTMタグのリストに先ほど定義したタグ名があるはずです。これはchangeイベントのイベントリスナーが働き始めた証拠です。

しかし、この時点でデータレイヤーを確認すると、eventはgtm.loadなど関係のないイベントになっているはずです。これはchangeイベント、つまり順序を選ぶイベントがまた発生していないためです。

プレビューページのドロップダウンメニューで値を一度選んでみたら、下図のような情報が出るはずです。eventはカスタムJavaScriptコードで指定したonlineMallOrderSelectedになりました。他の一緒にプッシュした値、例えばselectedElementやselectedValueも出るはずです。これで、テスト成功です。

ステップ５：カスタムイベントタグをトリガーとして設定しよう

一番複雑な設定を完了しましたので、これからの設定はスムーズに行えます。順序を選んだ際に発生するイベント、つまり先ほど作成できたカスタムイベントタグをトリガーとして設定して良いです。

まず、新規トリガーのタイプを選択するウィンドウで「カスタムイベント」を選択します。

イベント名のところに、カスタムJavaScriptコードで指定したイベント名を入力します。テストの際にデータレイヤーで検知できたイベント名も同じです。本例の場合にはonlineMallOrderSelectedとなります。

「トリガーの発生場所」は「すべてのカスタムイベント」のままで大丈夫です。

ステップ６：選んだ順序の情報を変数として設定しよう

こちらもまず、新規変数のタイプを選択するウィンドウで「データレイヤーの変数」を選択します。

そして、データレイヤーの変数名のところに、順序の日本語文字列がほしい場合は「selectedElement.innerHTML」、value属性の値がほしい場合は「selectedValue」と指定してください。

ステップ７：変数を取得するGA4イベントをタグとして設定しよう

一般的なGA4タグの設定と同じように、タグの種類に「GA4イベント」を指定し、測定IDを入力します。

次に、GA4での表示イベント名を指定し、ステップ6で作成した二つの変数をパラメータに設定します。

そして、ステップ5で作成したトリガーを配信トリガーに設定します。

最後、タグの名前も忘れずに入力してください。ステップ3で作成した「表示順を選んだイベントリスナー」と区別するために、ここでは「表示順を選んだ」と指定しましたが、ご自身のニーズに応じて調整してください。

ステップ８：公開する前にしっかりテストしよう

設定が成功したかどうかは、公開する前にちゃんと確認しましょう。ステップ4と同じように目標ページをプレビューモードで開きます。今回はドロップダウンメニューで値を一度選んでみたら、下図のように「表示順を選んだ」というGTMタグも発火したことを確認できるはずです。

そして、GA4タグを確認すると、ステップ７で定義したGA4イベントも記録されたはずです。クリックで詳細情報を見ると、一番下のところにイベント名とイベントパラメータも確認できます。選んだ値と合っているなら、おめでとうございます！GTMの設定は成功です。公開すればデータの記録を始めます。後の回数確認はGA4で行えます。