この記事は、カスタマーサクセス / カスタマーサポートのコミュニティ『CS HACK』の『CS HACK Advent Calendar 2021』に寄稿する参加させていただき、書いています🎄
CS界隈でも広く利用されているカスタマーサービスソフトウェア「Zendesk」を利用されている方向けに特化した内容です。
私の自己紹介はこちらに載っています。もしご興味があれば見ていってください。
この記事の対象読者
- Zendesk Guideを利用している
- 「役に立った」のイベントログを有効活用できていない
Zendesk Guideをご利用の場合
Zendesk Guide（FAQサイト）で、自社サービスのヘルプサイトを構築すると、各記事の末尾に自動的に「役に立ったか？」を訪ねるイベントが発生します。
Zendesk Guideに限らずヘルプの記事の末尾にこのようなイベントを目撃する機会は多いのではないでしょうか？
.gif?w=362&f=webp)
ここで集まってくる投票結果は次のような活動に還元が可能です。
- 定期的に「はい」が押されている記事は、読む価値がある記事です。 何か困ったことが起きてヘルプに来て、記事の内容で解決できたということならば、それはプロダクトの中の体験改善に生かすことも可能と考えプロダクトフィードバックのアイデアに持って行くことができます。
- 定期的に「いいえ」が押されている記事は、記事の内容が古かったり、タイトルが内容に沿っていない可能性があります。CS内のFAQ改善活動に生かすことができます。
今回は、ここのクリックイベントをGoogle AnalyticsとGoogleタグマネージャー（GTM）を用いて、クリック数計測を行う方法を解説します。
完成型
今回目指すゴールはこのようなダッシュボードです。
このダッシュボードでは、各記事ごとの「役に立った」「役に立たなかった」の数を週次で集計しています。
前週比も出すことで、例えば今週新たに発生した「役に立たなかった」記事が観測できるようになるので、記事の品質低下の前兆を早めに知る機会につながっています。
では具体的にデータ取得の方法を解説します。
データ取得のレシピ
- GTMのコンテナ作成と、GTMコードの埋め込み
- voteイベントのコードをセットする
- イベント発火の確認を取る
- Googleデータポータルでビジュアル化する
GTMのコンテナ作成と、GTMコードの埋め込み
Zendesk Guideにて、GTMを設置する場合、Zendeskの以下公式サポートページが役に立ちます。
Google Analyticsの連携も未設定の場合は、以下記事にてご対応ください
GTMの利用を開始する上で、ここに書かれている以下4つの作業を行ってください。
- GTMのコンテナの作成する
- 発行されたコードスニペットをコピーし、利用中のGuideのテンプレートに追加する
- GTMコンソール画面でテスト用のタグを作成する
- ヘルプセンターのプレビューにて、GTMのテストタグが発火することを確認する
※詳しい内容は記事に書いてあるのでここでは割愛します。
※注意点
テストタグの発火の検証を行う際、実際に稼働中のGuideページにテストタグが発火しないように注意する必要があります。
本番で稼働中のテンプレートをコピーし、テーマライブラリに移した上で、テーマライブラリにあるテンプレートでの開発を進めてみてください。
voteイベントのコードをセットする
テストタグの発火が確認できたら、実際にvoteに関するタグの設置を行います。
今回は、「役に立った」 = up-vote と 「役に立たなかった」 = down-vote の2つのイベントを計測するタグを作成します。
- クリック条件のクラス名を取得する
- トリガーの作成
- タグの作成
最初に、実際のヘルプページを開き、「役に立った」と「役に立たなかった」ボタンを押下した際に作動するクラス名を取得してきます。
Zendeskの場合、「役に立った」は article-vote-up で、「役に立たなかった」は article-vote-down が設定されていました。
このクラス名をコピーしておきます。
※クラス名は利用されるテンプレートによっては違う可能性もあるので、必ず自身のヘルプページのソースコードでお確かめください。
GTMの編集画面に戻り、発火条件となるトリガーを作成していきます。
トリガの作成画面に進み、「クリック - すべての要素」を選び、「一部のクリック」から次に進みます。
トリガの発火条件の選択で「組み込み変数を選択します」から、「Click Classes」を選んでください。
.png&w=3840&q=80)
コピーしておいたクラス名を挿入して保存してください。
.png&w=3840&q=80)
同じ要領で、down-voteのトリガも作成しておきます。
.png&w=3840&q=80)
タグのメニューからタグの設定を行っていきます。
ここでは、up-voteのクリックがされたときにその情報をGAのイベントに記録する設定をします。
GAのユニバーサルアナリティクス（GA4をご利用の方は未検証です 🙇 ）を選択し、「イベント」を選び、 カテゴリ、 アクション、 ラベル、 値 などにGAに流し込みたい文字列を設定してください。
設定後、トリガーには先ほど作成したトリガを選択して「保存」します。
.png&w=3840&q=80)
同様に 「down-vote」についても設定します。
.png&w=3840&q=80)
タグの設定完了後GTMの右上「公開」ボタンから今回の一連の作業をリリースします。
イベント発火の確認を取る
タグの公開が完了したら、実際にGAのイベントページを開き、計測ができるようになっているか確認をします。
以下のgifのように、試しに「役に立った」と「役に立たなかった」のボタンを押下して、GAで計測されることを確かめてください。
.gif?w=750&f=webp)
Googleデータポータルでビジュアル化する
最後にGoogleデータポータルにて可視化を行います。
Googleデータポータルの基本的な使い方についてはここでは割愛いたします。
データポータルデータ追加にてGoogleアナリティクスを選択し取得したいGAのプロパティを選んで接続してください。
接続が済んだら、フィールド追加から、以下のようなフィールドを作成します。
hyperlink(CONCAT("https://help.suzuri.jp",ページ),ページ タイトル)
このフィールドを作っておくことで、記事タイトルにFAQへのリンクをつけた状態で表示できるようになります。
標準のフィールドだけだと、以下のようにURLの形式になっていなかったり、URLだけでは何の記事かが読みにくいので、ページタイトルにURLを結合する作業はとてもおすすめです。
.png&w=3840&q=80)
そして、実際のイベント数の指標は「合計イベント数」を採用しています。他にも指標はあるので、運用にあう指標を見つけてみてください。
.png&w=750&q=80)
最後に、「up-vote」と「down-vote」それぞれのフィルタを作ります。GAのイベントカテゴリに「up-vote」と「down-vote」の値を定義したので、このようなフィルタを用意して、出し分けしています。
.png&w=3840&q=80)
これで、各投票別のボードを作り完成です！お疲れ様でした！
