Google Analyticsでクリック数・タップ数を計測 | nangokuテンプレートの機能

トラッキングをする効果

なぜトラッキングをするのか。
企画の段階で、集客の全体図を描きます。
その中に「Webサイトへの流入→ゴール」のルートがあるでしょう。

もしもWebサイトへ1,000人が流入して、ゴールが10人だったら
なぜ990人がゴールできなかったのか知りたいと思いませんか？
トラッキングをすれば、その990人の行動が分かります。
たとえば「ゴール直前まで行った50人」がいたと分かっていたら、次の打ち手が変わるでしょう。

1,000→10
だけで次の企画を考えるか
1,000→100→50→10
というデータを手に入れた上で、次の企画を考えるのか。

どちらが良いかは明白。
トラッキングとは、お客様の足跡と心得ましょう。

トラッキングで計測すること

クリックした回数
タップした回数

これらを計測します。
「電話番号をタップしたかどうか」は、よくあるトラッキング対象です。

なぜ、企画者がトラッキングについて知るといいのか

トラッキングは、PDCAのPだからです。
つまり計画段階で決めることです。
というわけでトラッキング設計はズバリ、企画者の仕事。

トラッキングの「コード」自体は、プログラムっぽい感じがしますが「どのページで、どのように計測するか」は、プログラムとは無関係です。
そしてPDCAの「C」が、Google Analyticsでの結果確認となります。
Web制作者がテキトーに入れたトラッキング結果を、企画者がGoogle Analyticsでチェックするというのは、Pの無い「DCA」です。
計画段階で、どのように評価をするのか、あらかじめ折り込んでおきましょう。

トラッキングができる項目

nangokuでは、このように動線設定でトラッキングが可能です。

↑図のようにtrackingCodeが入力できるパーツは、トラッキング可能です。
バナーや動線などに、trackingCode欄があります。

また、通常の「テキスト」ユニットのように、aタグを書き換えられるユニットなら、トラッキング可能です。
「aタグ自体が謎」ということなら、トラッキングしたい箇所が可能かどうかWeb制作者に聞いてみましょう。

Google Analyticsでの確認方法

Google Analyticsの「イベント」ページで見られます。
どのページでクリックされやすいか、どこにある電話番号がタップされやすいかを計測できます。

もしもイベントをコンバージョンに登録していたら、コンバージョンのページでも確認できます。

トラッキングコードの入れ方

analytics.js（〜2017年）
gtag.js（2017年〜）

どちらのGoogle Analyticsコードを使っているかで記述が変わります。
下記でコードの入れ方を紹介しますが、ちゃんと読まなくて良いです。
3項目、欲しいデータが得られるのだな、ということだけ覚えればOKです。

実際のコード作成は、Web制作者にお願いしましょう。
ただし「どのページで、どんなデータを取りたいのか」は、企画者が決めて下さい。

analytics.js（〜2017年）の場合

ga('send','event','カテゴリ','アクション','ラベル', '値');
となります。
'カテゴリ','アクション','ラベル', '値'の4項目を指定できます。
よく使うのは値を抜いた3項目でしょう。

analytics.js（〜2017年）の設定例

カテゴリ	電話タップ
アクション	フッターの電話ボタン
ラベル	今見ているページのURL

onclick ="ga('send','event','電話タップ','フッターの電話ボタン','%{CURRENT_URL}', '値');"

となります。
%{CURRENT_URL}というのは、今見ているページを表示してくれるa-blog cmsの「変数」です。

gtag.js（2017年〜）の設定例

onclick="gtag('event', 'アクション', {'event_category': 'カテゴリ','event_label': '%{CURRENT_URL}'});"

グローバル数の{}が、文字化けすることがあります。（謎）
また、挿入箇所によっては、{}内を認識しないことがあります。
要確認。

ontouchstart スマホ向け
onmousedown　PC向け
onclick レスポンシブWeb
で計測がオススメです。

ユニット（テキスト）に入力する場合

<a href="tel:090-1234-5678" ontouchstart="gtag('event', 'tel-tap');">090-1234-5678</a>
のように、ユニットにaタグを書く場合は、上記のようにします。
{}は書けないので、event_categoryやevent_labelを記述できません。
グローバル変数も使えません。

aタグのtrackingCode欄に入力する場合

カスタムユニットや、各カスタムフィールドで創った入力欄を使う場合。

onclick="gtag('event', '電話タップ', {'event_category': 'カテゴリーのコードなど','event_label': ''});"

下記は、グローバル変数を使う場合。

ontouchstart="gtag('event', '電話TAP', {'event_category': 'サイト共通フッター','event_label': '%{CURRENT_URL}'});"

テーマ（html）に直で書く時の例

スマホ版の右上にある電話ボタンはontouchstartで。
テーマで使う時は、バックスラッシュを使ってエスケープしないと適用されない場合もあるか？
（通常バックスラッシュなしでも動作するはず。）

ontouchstart="gtag('event', '電話TAP', \{'event_category': 'スマホ版ヘッダー右上','event_label': '%{CURRENT_URL}'\});"