WEB担当ツール・ハウツー

【コピペ】クリック数の計測測定を無料でできるgoogleアナリティクスでの方法(カスタマイズ方法付き)

投稿日:2021年11月12日 更新日:

【コピペ】クリック数の計測測定を無料でできるgoogleアナリティクスでの方法の解説です。

電話ボタン、リンク、PDF資料、CTAなど「クリックされたか」を知りたい場合、Googleアナリティクスで計測測定できます。

 

Web365とは

Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。

Web365について詳しく知りたい方は「Web365とは」ご覧ください。

 


Googleアナリティクスでのクリック数計測の方法

 

クリック数の計測は3パターンある

GoogleAnalyticsでのクリック数を計測方法は3つあります。

 

  1. イベントトラッキング
  2. 拡張リンクアトリビューション
  3. URLにパラメータ追記

 

1 イベントトラッキング

イベントトラッキングとは、クリックをイベント発生といて計測する方法です。

クリック数を計測すると下記のような形で計測できます。

 

メリット

  • 計測したいリンクタグに1文を挿入するだけ

デメリット

  • あくまでクリック数を計測、PVではない

 

googleアナリティクスのクリックイベントのイメージ01

2 拡張リンクアトリビューション

 

GoogleAnalyticsの拡張プラグインで、ヒートマップのように、ページ単位でどのくらいクリックされたかなどが計測できます。

下記、拡張プラグイン元より出典の画像です。

PageAnalytics拡張アトリビューション

 

メリット

  • ビジュアルでクリック数が把握できる

デメリット

  • ビジュアルでの確認なので、データ化しづらい
  • 管理画面の設定を行う

3 URLにパラメータ追記

クリック計測したいリンクにパラメーターという任意の文字列をいれて、リンクページのPV数で計測します。

たとえば、下記のリンクURLの?以降にどこからクリックされたか分かるように任意の文字列をいれて設定しておきます。

〇〇.com?click_top

この場合、トップページのリンクだよ、と分かるイメージです。

 

メリット

  • リンクタグの1文で設定できる

デメリット

  • 任意のパラメーターの付与はSEO、検索流入性に悪影響

イベントトラッキングがベター

上記の3つのうち、どれがいいか、イベントトラッキングがベターかと思います。

 

上記2と3では、データ化しづらさ、SEO評価に悪影響

理由は、上記2と3では、データ化しづらさ、SEO評価に悪影響、という点です。

  • データ化しづらさ
  • SEO評価に悪影響

イベントトラッキングがベター

また、イベントトラッキングでは、下記の理由でベターです。

  • データ化できる、つまり分析しやすい
  • SEOなど、ユーザー視点での影響度が低い
  • 外部リンクなど自サイト範囲外でもクリック計測できる
  • より細かい分析ニーズにカスタマイズもできる

 

イベントトラッキングだとカスタマイズできる(後述)

特に、イベントトラッキングだとカスタマイズができる点が、Web担当の分析業務から考慮すると魅力です。

今回、後述で、クライアントサイトをはじめ、よくあるニーズに対してのカスタマイズ事例を紹介します。

 

イベントトラッキングの作り方

イベントトラッキングの作り方を解説します。

作り方からテストの流れです

  1. リンクにつけてみる
  2. GoogleAnalyticsのリアルタイムのイベント計測を確認する
  3. 発生してたらテスト成功

まず、クリック計測したいタグ内に下記サンプルをつけます。

クリックしたいタグが下記(リンク目的のaタグ)

<a href="hogehoge.com/sample">サンプルページへ</a>

クリック計測するためのコード(onclickという属性を追記します)

<a href="hogehoge.com/sample" onclick="gtag('event', 'click', {'event_category': 'link','event_label': 'cta_page_link_sample','value': '1'});">サンプルページへ</a>

上記をクリックがされると、

GoogleAnalyticsのリアルタイムのイベント計測を確認した場合、下記のように計測されます。

 

GoogleAnalyticsのイベント計測リアルタイム

 

これで計測設定ができました。

 

コードの付け方は2つあります

イベントトラッキングの計測コードの付け方は2つあります。

クライアントサイトによって、GoogleAnalyticsの設定などが違うため、2つ利用するケースが現在あります。

 

現在、GoogleAnalyticsは、analytics.js から gtag.js に移行しており、新旧2つある、という状態です。

 

1 analytics.js を利用の場合

onclick="ga('send','event','cta_page_link_top','click','more', 1);"

 

2 gtag.js を利用の場合

onclick="gtag('event', 'click', {'event_category': 'link','event_label': 'cta_page_link_top','value': '1'});"

 

各コードの詳細

1 analytics.js を利用の場合

onclick="ga('send','event','link','click','cta_page_link_top', 1);"


onclick="~""

onclickという属性です。JavaScriptというプログラミング言語で、クリックされたら”~”の処理をするという今回のようにイベント時の処理をしたいときの記述の1つです。

ga('send','event',~

イベントトラッキングの書き方。イベント計測するため、Googleアナリティクスに送る記述です。

link

イベントカテゴリ(計測したいデータのグループ)の名前です。リンクのクリック計測なので、linkとしています。

click

イベントアクション(この動作の名前)の名前です。クリック数計測なので、clickとしています。

cta_page_link_top

イベントラベル(計測したいデータ)の名前です。CTAリンクなのでクリック数なのでcta_page_link_topにしています。

これは、のちほど分析しやすいように命名規則をつくってふっておくと良いです。

 

1

1クリックにおける計測値値です。

クリック1回なら、1のままOKです。

カスタマイズ事例としては、下記で適宜変更すると良いです。

  • 同じURLを複数設置しそれぞれ差異を計測したいとき
  • イベントごとに重みづけをして計測したいとき

 

2 gtag.js を利用の場合

onclick="gtag('event', 'click', {'event_category': 'link','event_label': 'cta_page_link_top','value': '1'});"

1の各説明と同義ですが、少し記述の仕方が変わっています。

 

実践、イベントトラッキングをカスタマイズ

イベントトラッキングはカスタマイズできる点が、実際のクライアント業務において活用できるポイントです。

事例として、

複数ページで共通CTA(問い合わせなどサイトのゴールを案内する導線)を設置。

どのページでクリックされているかをイベントトラッキングで計測したい。

こんな場合があります。

 

複数ページで共通CTAのとき

 

複数ページで共通CTA、どのページでクリックされているかのカスタマイズ

この場合のカスタマイズですが、

したいことは、

  • どのページのCTAをクリックしたか知りたい
  • そのページの名前(URLの末名)を取得して
  • イベント名(例ですと、cta_page_link_topのtopをblog)に書き換える

という処理をして、イベントトラッキングのコードを設定したいです。

その際のカスタマイズですが、プログラミング(JavaScript、jQuery)をつかうと、便利です。

今回、WordPress内での任意の場所にコピペで使えるコードを用意しました。下記です。

$(document).ready(function() {

var page_url = location.href.split("/");
var page_url2 = dir[dir.length -1];

var page_url_tag = "gtag('event', 'click', {'event_category': 'link','event_label': 'cta_page_link_top_"+page_url2+"','value': '1'});";

$('a[href="hogehoge.com/contact"]').attr("onclick", page_url_tag);

});

 

コードの解説です。

$(document).ready(function() {

DOMの読み込みが完了したときに処理を実行するための記述です。

DOMとはJavaScriptでHTMLを操作するためのインターフェースです。

 

var dir = location.href.split("/");

location.hrefで現在のページURLを取得。

例 hogehoge.com/blog

split(“/”)でURLのディレクトリである/ごとに分けて、配列に格納し、変数をdirとしています。

例 hogehoge.com/blog → dir = [hogehoge.com , blog]

 

var dir2 = dir[dir.length -1];

dir[dir.length -1]の、dir[数字]は、配列のdirの中身の数字の順番のものを取得したいときの書き方です。

URLの末名を取得したいので、dir.length -1、

つまり、dir.lengthで、配列のdirの中身の個数から1を引けば取得できます。

dir.lengthで、配列のdirの中身が何個あるか数えます。

例 dir.length = 2個(hogehoge.comとblogで2個)

dir.length -1で、URLの末名を取得したいので、
例の場合、blog 、 2個-1を引けば、1となります。

配列のdirの中身は順番は、0,1、2と数えていきます。

つまり、

dir[1]なら、0,1と数えて、1番のblog、となります。

var page_url_tag = "gtag('event', 'click', {'event_category': 'link','event_label': 'cta_page_link_"+page_url+"','value': '1'});";

イベントトラッキングであるgtag移行の文字列を、先のページ名と組み合わせてつくっていきます。

'cta_page_link_"+page_url+

という部分で、組み合わせて、

'cta_page_link_top_blog

となるようにしてます。

"gtag('event', 'click', {'event_category': 'link','event_label': 'cta_page_link_top_blog','value': '1'});";

という文字列を、

変数page_url_tag

に格納します。

 

$('a[href="hogehoge.com/contact"]').attr("onclick", page_url_tag);

});

aタグのhref属性が、hogehoge.com/contact

のaタグに対して、

.attr("onclick", page_url_tag);

onclickという属性をつけてね、属性の詳細は、変数page_url_tagだよ

という記述です。

 

 

以上です。

ご活用ください。

 

計測分析に興味がある方は、こちらも合わせてご覧ください。

【事例】ヒートマップ分析でWebサイト改善、1ヶ月で有効熟読率が4.5倍向上した分析と改善方法を解説

 

 

■お気軽にご相談ください

クリック数の計測などサイトの分析で相談したい方、そもそものWebサイトの分析提案や改善実行など相談したい方はこちらよりお気軽にご連絡ください。

必須お名前
必須メールアドレス
必須ご相談内容
必須メッセージ本文

 






Web担当者として月額サポートします。

Web365は貴社のWeb担当者として、制作改善運用をワンストップ定額サポートしています

・成果にこだわるサイト制作改善をお望みの方
・良いweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方


是非Web365までご相談ください。






Web制作+Webマーケティングの個別講座開講中

Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております


・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方


どうぞWeb365の個別講座をご覧ください。

WEB担当ツール・ハウツー

執筆者:

関連記事

【簡単】出欠確認ならGoogleフォームがおすすめと作成の流れ

Googleフォームの概要と作成の流れを解説します。 Web365とは Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。 今回は、クライアン …

Googleカレンダーと連携した日程予約カレンダーをつくりました

日程予約カレンダーを作成しました。 アポ前の社内調整をGoogleカレンダーでカンタンにできます。 カレンダーの対応可能日程のみをフォームに表示させ、第3希望まで選択できるフォームです。 カレンダーは …

Word原稿をWordPressにUPするとき画像が横向きなる対応や効率的な公開方法

クライアントさんからいただいたWord原稿をWordPressにUPしたいときの効率的な公開方法を解説します。その際の画像がWordPressのメディア内で横向きになってしまうときの対応も解説します。 …

【コピペ】Googleスプレッドシートでアポ調整シートをつくりました

        Googleスプレッドシートでアポ調整シートをつくりました。 アポ前のご自身の候補日を先方にメールする際に、日程候補をコピペできるシートです。 …

Web担当者がSEO対策などで、検索順位を調べるときに使っているツール「GRC」

Web担当者がSEO対策などで、検索順位を調べるときに使っているツール「GRC」をご紹介します。 GRC 下記が管理ページで実際に使っています。     この記事でわかることWeb …

【学習方法】シニア向け、初心者の方がGmail、Zoom、You Tubeを学習する方法

質問にて、シニア向け、初心者の方が、100名規模のグループに対し、連絡、アンケート、オンライン会議等を実施するためのツールとして、どんな物が良いか?Gmail、Zoom、You Tubeをおすすめし、 …

マルチタスクの失念対策「成果をあげるタスク・予定のたて方」

クライアントサイトの成果をあげることをミッションとしているWeb365は、タスクスケジュールから、1日のカレンダースケジュールまで落とし込むときにも成果を意識するような予定の作り方をしているので、共有 …