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制作+Webマーケティングの個別講座開講中

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


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


どうぞWeb365の「自社のWebサイトを自身で作りたい、改善したい人のオーダーメイド個別講座」をご覧ください。






外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。

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

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


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

WEB担当ツール・ハウツー

執筆者:

関連記事

iPhoneのインターネット共有でPC作業中、データ大量消費されてしまうときの対応方法

iPhoneのインターネット共有でPC作業しているときのデータ大量消費してしまっているときはありませんか? そんなときは、タスクマネージャーでの確認と原因アプリの対応がおすすめです。 今回は対応方法、 …

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

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

イメージ01_ヒートマップの分析改善方法

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

Webサイトの改善で、ユーザーの閲覧具合をみて、改善をはかりたいとき、「ヒートマップ」での分析はひとつの選択肢です。 今回は、ヒートマップでWebサイト改善、1ヶ月で有効熟読率が4.5倍向上した分析と …

自社業務をクラウドソーシングで外注依頼したいときの発注9ステップ

自社コンテンツ作成の際に自社内で手が回らず、クラウドソーシングしたいときはありませんか? そんなときは、クラウドソーシングサービスで依頼することも一案です。 今回は発注方法と具体事例を紹介します。 こ …

【事例】Webサイトの保守運用を外注依頼すると何をしてくれるのか?

Webサイトを制作業者に依頼し納品後に発生する「保守運用・セキュリティ」の業務。 あれは実際何をしてくれるのか。 Web365の場合で事例解説します。 Web365とは Web365は、外部Web担当 …

【体験】オンラインビジネスチャットサポートってなに?無料体験の流れと機能を解説

Webサイトの閲覧ユーザーの満足度をあげる機能「オンラインビジネスチャットサポート」、つまりチャットってどんなものなの?いちサービスを無料体験してみた流れと機能解説などしてみたいと思います。 Web3 …

【簡単】サイトマップを自作するときのリンク抽出ツールの紹介

サイトマップを自作するときに、リンクをひとつひとつコピペするのは大変です。抽出ツールをいくつか探してみて、おすすめを紹介します。 まず、ここでのサイトマップの定義は、サイトのページのタイトルとリンクを …