この記事で説明すること
・GoogleAnalyticsを使ってサイト内の検索キーワードを集計する方法。
・検索フォームに入力されたスペース区切りの文字列を別々の検索ワードとして集計する方法。
・（おまけ）ひらがな入力された検索キーワードをカタカナに変換してGAに集計させる方法。
（間違っている箇所がございましたらコメント頂けますと幸いです。）
前提
Googleアカウントを持っていて、プロパティを作成し終えていること。
実装
手順1.GoogleAnalyticsのグローバルサイトタグ(gtag.js)をコピー
GoogleAnalyticsの右下の歯車のアイコンをクリック
[管理/プロパティ/トラッキングコード]を押すと上記の画面に遷移しますのでグローバルサイトタグをコピー
手順2.タグを埋め込む
<ul>
<li>
<input type="search" class="search__input" id="search_keyword_id" placeholder="キーワードを入力">
</li>
<li>
<button class="button１" onclick="search()">検索する</button>
</li>
</ul>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=[トラッキングID]"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[トラッキングID]');
</script>
検索フォームのあるページに手順１でコピーしたグローバルサイトタグを埋め込む
[トラッキングID]には自分のトラッキングIDを記述
こちらでサイト内のデータをGoogleAnalyticsにて計測する準備は完了
(共通化しているheaderなどがあればそちらに貼り付けてもOK）
手順3.検索フォームの文字列を検索ワードとして集計させるための処理を追加
<ul>
<li>
<input type="search" class="search__input" id="search_keyword_id" placeholder="キーワードを入力">
</li>
<li>
<button class="button１" onclick="search()">検索する</button>
</li>
</ul>
<script async src="https://www.googletagmanager.com/gtag/js?id=[トラッキングID]"></script>
<script>
function search(){
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[トラッキングID]');
// キーワード検索の文字列を取得
let keyWord = document.getElementById('search_keyword_id').value;
gtag('event','keyword', {'event_label' : keyWord});
}
</script>
こちらの処理を追加することでGoogleAnalyticsの[行動/イベント]で以下の様に計測されます。
イベントアクション:keyword
イベントラベル:検索フォームで入力したワード
しかし、このままの実装だと「いちご ばなな りんご」と検索した際に「いちご」、「ばなな」、「りんご」と別々のワードとしてGoogleAnalyticsに集計させたいが「いちご ばなな りんご」と集計されてしまうので手順４に進みます。
手順4.検索フォームからスペース区切りの文字列を別々の検索ワードとして集計させるための処理を追加
<ul>
<li>
<input type="search" class="search__input" id="search_keyword_id" placeholder="キーワードを入力">
</li>
<li>
<button class="button１" onclick="search()">検索する</button>
</li>
</ul>
<script async src="https://www.googletagmanager.com/gtag/js?id=[トラッキングID]"></script>
<script>
function search(){
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[トラッキングID]');
// キーワード検索の文字列を取得
let keyWord = document.getElementById('search_keyword_id').value;
let splitKeyWord = keyWord.split(/ | /);
//配列の長さ（個数）を取得
let keyWordLength = splitKeyWord.length;
//forでスペース区切りのキーワードを個別に取得
for(let i = 0; i<keyWordLength; i++){
if(splitKeyWord[i]){
gtag('event','keyword', {
'event_label' : splitKeyWord[i]
});
}
}
}
</script>
こちらの処理を追加することで検索フォームに「いちご ばなな りんご」と検索した際に「いちご」、「ばなな」、「りんご」と別々のワードとしてGoogleAnalyticsに集計されます。
おまけ
ひらがな入力された検索ワードをカタカナに変換してGAに集計させる方法
<ul>
<li>
<input type="search" class="search__input" id="search_keyword_id" placeholder="キーワードを入力">
</li>
<li>
<button class="button１" onclick="search()">検索する</button>
</li>
</ul>
<script async src="https://www.googletagmanager.com/gtag/js?id=[トラッキングID]"></script>
<script>
function search(){
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[トラッキングID]');
// キーワード検索の文字列を取得
let keyWord = document.getElementById('search_keyword_id').value;
let splitKeyWord = keyWord.split(/ | /);
//配列の長さ（個数）を取得
let keyWordLength = splitKeyWord.length;
//forでスペース区切りのキーワードを個別に取得
for(let i = 0; i<keyWordLength; i++){
if(splitKeyWord[i]){
gtag('event','keyword', {
'event_label' : hiraToKana(splitKeyWord[i])
});
}
}
}
//ひらがなをカタカナに変換する処理
function hiraToKana(str) {
return str.replace(/[\u3041-\u3096]/g, function(match) {
var chr = match.charCodeAt(0) + 0x60;
return String.fromCharCode(chr);
});
}
</script>
この実装を行うことで、実装前までは「いちご」と「イチゴ」が別のワードとしてGoogleAnalyticsに集計されてしまっていましたが、どちらも「イチゴ」として集計される様になります。