ブログのクリックをGoogle Analyticsで計測。

クリック数を計測したい(手軽に)！

こんにちは、「ふ」です。
ブログ内に配置したボタンや広告バナー。

そのクリック状況を把握して、サイト改善やテストに生かしたいと思っている方、たくさんいらっしゃるでしょう。

ただし..💧

・ 新たなツール導入による学習リスク

・ 広告のコードを変更して、ペナルティを受けないか？

・ 外部スクリプト読み込みによるページスピードの低下

〜このへんが引っかかっているのではないでしょうか。

そこで今回。
このページに訪れていただいた（ありがとうございます）みなさんにおいてはすでに取り入れているであろうGoogle Analiyticsだけを使ってユーザのクリックイベントを計測するというものをやってみたので、紹介したいと思います。
バナー広告のコードは改変することなく、実装することができます。


導入済みのAnalyticsを使ってのものなので、

・もちろん無料。

・新たなツールの使い方をゼロから覚える必要なし。

・追加scriptがないので、ページパフォーマンスへの影響もありません。

各ページにコードを埋め込む手間がありますが、それ以外は負荷やリスクはなし。
コピペするだけなので、JavaScriptはちょっと..という方でも問題なく実装できます。

ユーザの動向を把握してPV⬆︎、コンバージョン⬆︎に繋げましょう。

クリック識別の仕組み。

<div onclick = "gtag('event','「「５アクション名」」',｛'event_category':'「「５カテゴリ」」','event_label':'「「５ラベル」」'｝);"> </div>

方法は、クリック計測したい部分を⬆︎のタグで囲むだけ。
３箇所あるオレンジの部分には、好きなキーワードを記述することができます。

web上でユーザがこの<div>に囲まれた領域をクリックすると、そのつどページ情報とキーワードの内容がGoogle Analyticsに送信されます。
それにより、Analyticsからクリック数やその対象などのデータが得られるという仕組みです。

たとえば１つのページ内でもボタン、リンクなど「クリックを計測したい要素」は複数あることでしょう。
計測する要素に対して、個別のキーワードをつけておけば「どの部分がクリックされたか」を識別することができます。

また複数のページに渡って共通のリンクを貼っているときなど。
それらに同じキーワードをつけておくことで、「〇〇のリンクは全体でどれだけクリックされているのか」を知ることもできます。

挿入コード内にはキーワードを３種類指定することができます。「ページ内識別キーワード」「全体用キーワード」などと、工夫して使い分けましょう。
次のセクションで、記述のルールを確認していきます。

記述ルール。

<div onclick = "gtag( bb'event', bb'「「５アクション名」」', bb「「２｛'event_category':'「「５カテゴリ」」','event_label':'「「５ラベル」」'｝」」 bb);"> bb「「３<!-- 計測したい部分 -->」」 </div>

それでは記述ルールについて紹介します。
⬆︎のコードのうち、

① 黒の部分はそのまま記述してください。

② オレンジの部分には、識別したいキーワードを自由に入れられます。
便宜上「アクション名」「カテゴリ」などとありますが、気にしなくて構いません。

③ 「アクション名」の場所は必ずキーワードを入れなければなりません。
一方{ }に囲まれたブルーの部分は、記述を省略することも可能です。キーワードを複数指定したい場合に利用しましょう。
また、

｛'event_label':'「「５ラベル」」'｝

と片方だけのセットでも構いません。

キーワードをセットしたら、<div> 〜 </div>でクリックを計測したい部分を囲めばOKです。

<a href = "〇〇">広告リンク</a>

たとえば、⬆︎のような広告リンクを計測したい場合は、⬇︎のように囲んであげてください。キーワードも入れてみました。

<div onclick = "gtag( bb'event', bb'「「５クリック」」', bb｛'event_category':'「「５広告A」」','event_label':'「「５header下に配置したもの」」'｝ bb);"> bb「「１<a href = "〇〇">広告リンク</a>」」 </div>

内部の要素に直接onclick属性を指定する書き方もあります。

<「「１a」」 onclick = "gtag( bb'event', bb'「「５クリック」」', bb｛'event_category':'「「５広告A」」','event_label':'「「５header下に配置したもの」」'｝ bb);"> bb「「１広告リンク」」 <「「１/a」」>

計測する要素によっては、コードの内容を書き換えたくない場合や、インライン要素のままにしておきたい場合もあるでしょう（<div>で囲んだ部分はブロック要素として扱われます）。
それぞれのケースによって使い分けるようにしてください。

実例。

■ jikken.html 実際の使用例を紹介していきます。
実験用のページを１つ作り、３つのリンク付き画像をおきました。

<a href = ""> <img src = "mitarasi.svg"> </a> <a href = ""> <img src = "mattya.svg"> </a> <a href = ""> <img src = "hanami.svg"> </a>

識別したい情報を整理しておきましょう。
たとえばこんな⬇︎感じです。

① クリックされたページ

② 団子の種類

③ 掲載位置、上なのか下なのか

①はキーワードに取り込む必要はありません。analyticsで対象のページurlは自動で検出されます。

②。どの団子がいちばんクリックされているのかを知りたい。これはキーワードに取り入れましょう。

③。掲載位置によってクリックは変わってくるのか？将来的に順番を入れ替えてテストしたい。→これもキーワードに入れておきましょう。

必要なキーワードは団子の種類と掲載位置を識別する２つなので、今回は必須である「アクション名」と任意のうちの１つ「カテゴリ」の場所を使います。

<div onclick = "gtag('event',「「１'掲載位置：上'」」,｛'event_category':「「５'みたらし'」」｝ );"> <a href = ""> <img src = "mitarasi.svg"> </a> </div> <div onclick = "gtag('event',「「１'掲載位置：中'」」,｛'event_category':「「５'抹茶'」」｝ );"> <a href = ""> <img src = "mattya.svg"> </a> </div> <div onclick = "gtag('event',「「１'掲載位置：下'」」,｛'event_category':「「５'花見'」」｝ );"> <a href = ""> <img src = "hanami.svg"> </a> </div>

これでセット完了です。ページをアップロードしましょう。

一晩待つ。

実装した記事をアップロードしても、Google Analyticsに反映されるまでは少し時間が掛かります。
何度か実験したのですが、一晩おけばおおむね反映されるようです。