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で集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方

どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。






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

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

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


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

【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供

Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています

・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方

Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています

・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行(Googleアナリティクス、eコマース、ヒートマップClarityなど)


まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。

WEB担当ツール・ハウツー

執筆者:

関連記事

AIを活用した内部リンク戦略:効果的な記事選定の方法

あなたのWebサイト、もっと効果的に活用したいと思いませんか?この記事では、クライアントが作成した記事に過去の関連記事を提案するプロセスを解説します。内部リンクを増やし、ユーザーの次の行動を促す方法で …

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

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

Googleサーチコンソールの設定手順

Googleサーチコンソールの設定手順

Google Search Console(グーグルサーチコンソール)の設定手順について解説します。 この記事でわかることGoogle Search Console の設定方法は2つサイトにGoogl …

【解説】googleアナリティクス、GA4の設定方法がうまくできないときの複数設定方法

googleアナリティクス、GA4の設定方法がうまくできないときの複数設定方法の解説です。 WebサイトのPVなど計測した場合、Googleアナリティクスで計測測定できます。 【2023年7月にGA4 …

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

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

Googleアナリティクス(GA4)のまとめて設定代行サービス

トリプラ(tripla)でGoogleアナリティクス(GA4)、初めにしておきたい全設定、まとめて代行サービス

トリプラのGA4設定(eコマース設定)の個別対応実績あります ホテル予約ツール、トリプラをお使いのホテルサイトに、Googleアナリティクス(GA4)、Googleタグマネージャーを貴社サイトに最適な …

【秒速】ファイル名を一括置換したいときに便利なツールの「Flexible Renamer 8.4」

写真データなどは、ファイル名が自動で振られているので、整理する際や記事にあげるときに、ファイル名をきちんと付け直したいときがあります。 ファイル名を一括置換したいときに便利なツールの「Flexible …