【コピペ】クリック数の計測測定を無料でできるgoogleアナリティクスでの方法の解説です。
電話ボタン、リンク、PDF資料、CTAなど「クリックされたか」を知りたい場合、Googleアナリティクスで計測測定できます。
Web365とは Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。 Web365について詳しく知りたい方は「Web365とは」ご覧ください。
Googleアナリティクスでのクリック数計測の方法
この記事でわかること
クリック数の計測は3パターンある
GoogleAnalyticsでのクリック数を計測方法は３つあります。
- イベントトラッキング
- 拡張リンクアトリビューション
- URLにパラメータ追記
１ イベントトラッキング
イベントトラッキングとは、クリックをイベント発生といて計測する方法です。
クリック数を計測すると下記のような形で計測できます。
メリット
- 計測したいリンクタグに1文を挿入するだけ
デメリット
- あくまでクリック数を計測、PVではない
２ 拡張リンクアトリビューション
GoogleAnalyticsの拡張プラグインで、ヒートマップのように、ページ単位でどのくらいクリックされたかなどが計測できます。
下記、拡張プラグイン元より出典の画像です。
メリット
- ビジュアルでクリック数が把握できる
デメリット
- ビジュアルでの確認なので、データ化しづらい
- 管理画面の設定を行う
３ URLにパラメータ追記
クリック計測したいリンクにパラメーターという任意の文字列をいれて、リンクページのPV数で計測します。
たとえば、下記のリンクURLの？以降にどこからクリックされたか分かるように任意の文字列をいれて設定しておきます。
〇〇.com？click_top
この場合、トップページのリンクだよ、と分かるイメージです。
メリット
- リンクタグの1文で設定できる
デメリット
- 任意のパラメーターの付与はSEO、検索流入性に悪影響
イベントトラッキングがベター
上記の３つのうち、どれがいいか、イベントトラッキングがベターかと思います。
上記２と３では、データ化しづらさ、SEO評価に悪影響
理由は、上記２と３では、データ化しづらさ、SEO評価に悪影響、という点です。
- データ化しづらさ
- SEO評価に悪影響
イベントトラッキングがベター
また、イベントトラッキングでは、下記の理由でベターです。
- データ化できる、つまり分析しやすい
- SEOなど、ユーザー視点での影響度が低い
- 外部リンクなど自サイト範囲外でもクリック計測できる
- より細かい分析ニーズにカスタマイズもできる
イベントトラッキングだとカスタマイズできる（後述）
特に、イベントトラッキングだとカスタマイズができる点が、Web担当の分析業務から考慮すると魅力です。
今回、後述で、クライアントサイトをはじめ、よくあるニーズに対してのカスタマイズ事例を紹介します。
イベントトラッキングの作り方
イベントトラッキングの作り方を解説します。
作り方からテストの流れです
- リンクにつけてみる
- GoogleAnalyticsのリアルタイムのイベント計測を確認する
- 発生してたらテスト成功
まず、クリック計測したいタグ内に下記サンプルをつけます。
クリックしたいタグが下記（リンク目的の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の設定などが違うため、２つ利用するケースが現在あります。
現在、GoogleAnalyticsは、analytics.js から gtag.js に移行しており、新旧２つある、という状態です。
１ analytics.js を利用の場合
onclick="ga('send','event','cta_page_link_top','click','more', 1);"
２ gtag.js を利用の場合
onclick="gtag('event', 'click', {'event_category': 'link','event_label': 'cta_page_link_top','value': '1'});"
各コードの詳細
１ analytics.js を利用の場合
onclick="ga('send','event','link','click','cta_page_link_top', 1);"
onclick="～""
onclickという属性です。JavaScriptというプログラミング言語で、クリックされたら”～”の処理をするという今回のようにイベント時の処理をしたいときの記述の１つです。
ga('send','event',~
イベントトラッキングの書き方。イベント計測するため、Googleアナリティクスに送る記述です。
link
イベントカテゴリ（計測したいデータのグループ）の名前です。リンクのクリック計測なので、linkとしています。
click
イベントアクション（この動作の名前）の名前です。クリック数計測なので、clickとしています。
cta_page_link_top
イベントラベル（計測したいデータ）の名前です。CTAリンクなのでクリック数なのでcta_page_link_topにしています。
これは、のちほど分析しやすいように命名規則をつくってふっておくと良いです。
1
1クリックにおける計測値値です。
クリック1回なら、１のままOKです。
カスタマイズ事例としては、下記で適宜変更すると良いです。
- 同じURLを複数設置しそれぞれ差異を計測したいとき
- イベントごとに重みづけをして計測したいとき
２ gtag.js を利用の場合
onclick="gtag('event', 'click', {'event_category': 'link','event_label': 'cta_page_link_top','value': '1'});"
１の各説明と同義ですが、少し記述の仕方が変わっています。
実践、イベントトラッキングをカスタマイズ
イベントトラッキングはカスタマイズできる点が、実際のクライアント業務において活用できるポイントです。
事例として、
複数ページで共通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の中身の個数から１を引けば取得できます。
dir.lengthで、配列のdirの中身が何個あるか数えます。
例 dir.length = 2個（hogehoge.comとblogで2個）
dir.length -1で、URLの末名を取得したいので、
例の場合、blog 、 2個－1を引けば、1となります。
配列のdirの中身は順番は、０，１、２と数えていきます。
つまり、
dir[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までご相談ください。
