カスタムエレメントを利用しない検索結果画面向け マーケティングツールログ取得の実装方法
0. 前提
以下導入・利用マニュアルの手順を実施したあとに本項目の対応を行います。
MARS Platform - マーケティングツール サポートサイト > マニュアル > 導入ガイド
以降は、historyモード向けの手順となります。
ハッシュモードの場合は項目名（～queryの箇所が ～hashとなる等）が異なります。
1. GTM変数の修正
1-1. カテゴリ
1-1-1.
MP get Search Category from queryにおいて、検索時のURLよりカテゴリを指定しているqueryパラメータのname部分を確認ください。(カテゴリを利用していない場合は対応不要です)
例)https://www.marsflag.com/ja/searchresult.html?ct=製品・サービス&dd=製品・サービス&doctype=all&htmlLang=ja&imgsize=3&page=1&pagemax=10&q=検索&sort=0
ct=製品・サービスがカテゴリを指定しているqueryパラメータとなりますので、
queryパラメータのnameはctとなります
1-1-2.
確認したqueryパラメータのnameを用いて以下のように修正してください。
修正前後のコードを確認する
修正前
- if (parser.searchParams.has('ct')){
- return parser.searchParams.get('ct')
- }else
↓
修正後
- if (parser.searchParams.has('{queryパラメータのname}')){
- return parser.searchParams.get('{queryパラメータのname}')
- }else
1-2. ドリルダウン
1-2-1.
MP get Search Drilldown from queryにおいて検索時のURLよりドリルダウンを指定しているqueryパラメータのnameを確認ください
(ドリルダウンを利用していない場合はSKIPしてください)
例)https://www.marsflag.com/ja/searchresult.html?ct=製品・サービス&dd=製品・サービス&doctype=all&htmlLang=ja&imgsize=3&page=1&pagemax=10&q=検索&sort=0
dd=製品・サービスがドリルダウンを指定しているqueryパラメータとなりますので、
queryパラメータのnameはddとなります
1-2-2.
確認したqueryパラメータのnameを用いて以下のように修正してください
修正前後のコードを確認する
修正前
- if (parser.searchParams.has('d')){
- return parser.searchParams.get('d)
- }else
↓
修正後
- if (parser.searchParams.has('{queryパラメータのname}')){
- return parser.searchParams.get('{queryパラメータのname}')
- }else
1-3. ページ
1-3-1.
MP get Search Page from queryにおいて検索時のURLよりページを指定しているqueryパラメータのnameを確認ください
例)https://www.marsflag.com/ja/searchresult.html?ct=製品・サービス&dd=製品・サービス&doctype=all&htmlLang=ja&imgsize=3&page=1&pagemax=10&q=検索&sort=0
page=1がページを指定しているqueryパラメータとなりますので、
queryパラメータのnameはpageとなります
1-3-2.
確認したqueryパラメータのnameを用いて以下のように修正してください
修正前後のコードを確認する
修正前
- if (parser.searchParams.has('page')){
- return parser.searchParams.get('page')
- }else
↓
修正後
- if (parser.searchParams.has('{queryパラメータのname}')){
- return parser.searchParams.get('{queryパラメータのname}')
- }else
1-4. 検索キーワード
1-4-1.
MP get Search Phrase from queryにおいて検索時のURLより検索キーワードを指定しているqueryパラメータのnameを確認ください
q=検索が検索キーワードを指定しているqueryパラメータとなりますので、
queryパラメータのnameはqとなります
1-4-2.
確認したqueryパラメータのnameを用いて以下のように修正してください
修正前後のコードを確認する
修正前
- if (parser.searchParams.has('q')){
- return parser.searchParams.get('q')
- }else
↓
修正後
- if (parser.searchParams.has('{queryパラメータのname}')){
- return parser.searchParams.get('{queryパラメータのname}')
- }else
2. GTMトリガーの修正
2-1. トリガー MP SearchResultClickの修正
2-1-1. 各検索結果のアンカーに付与されているクラス名を確認
下記添付画像の例だと、mf_finder_link となります。
2-1-2. 確認したクラス名をもとにGTMのトリガー MP SearchResultClickを修正
2-2. トリガー MP NoSearchResultの修正
2-2-1. 2024.11.31以前に マーケティングツールを導入頂いた場合は、以下のマイグレーションを行ってください。
マイグレーション手順
2-2-2. 検索結果0件表示時に以下のスクリプトを実行するよう、検索結果画面ページに実装ください。
- window.dataLayer = window.dataLayer || []; dataLayer.push({'event':'MP_NoSearchResult'});
3. 設定内容を公開
以下の操作により、これまでの設定が公開されます。
手順:
- 画面右上の「公開」をクリックします。
- 「バージョン名」と「バージョン説明」を入力します。
- 画面右上の「公開」をクリックします。
Related Articles
3. Google Cloud Platformから JSON Keyを取得する
以下は、Google Analyticsにて収集されたログをマーケティングツールと連携させるための、JSON Keyを取得する手順です。 1. Google Analytics APIを有効化する 手順 Google Cloud Platformにログインする。 ダッシュボードより、[プロジェクトを作成] をクリック。 任意のプロジェクト名を入力し、[作成] をクリック。 サイドメニューから [APIとサービス] > [ライブラリ] をクリック。 APIの有効化 「Google ...5. JSON Keyを登録する
3. Google Cloud Platformから JSON Keyを取得する にて取得した JSON Keyを、実際にマーケティングツールへ設定する手順です。 1. サイドメニューのマーケティングツールから「Json Key登録」をクリックし、「Json Key変更」ボタンをクリックしてください。 2. Google Cloud Platformより取得したJSON Keyを入力し、「登録」をクリックします。 ...3. 各種ログ概要を参照する
「1. JSON Keyの登録」と「2.GoogleAnalyticsのID登録」の完了後、GoogleAnalytics（GA）よりデータの取り込みが完了すると、以下のように各種ログ概要の画面が表示されます。 ※JSON Key とGoogleAnalyticsのIDが未登録の場合は、当画面にはアクセス出来ません ※GAからのデータ取得タイミングにより、当マーケティングツールとGAのデータに差異が生じることがあります 各エリア毎の表示内容 ① 表示IDの選択 ② 期間選択 ③ 再読み込みボタン ...1. JSON Keyの登録
マーケティングツール導入ガイドにそって作業を実施してください。 上記作業を実施後、GoogleAnalyticsのID登録作業に移ります。既にGA/GTMを導入しているサイトへの、マーケティングツール導入は可能ですか？
Q. 既にGA/GTMを導入しているサイトへの、マーケティングツール導入は可能ですか？ A. はい、可能です。 導入に当たっては、マニュアルの導入ガイドを参考にして下さい。 参考： マニュアル->導入ガイド->2. Google AnalyticsとGoogle Tag Managerの設定