株式会社I-SEED(アイシード)|大阪・心斎橋のWEB制作集団

【gtag.js編】設置したバナーのクリック数をカウントする方法

【gtag.js編】設置したバナーのクリック数をカウントする方法

HISAHISA
この記事は、2020年3月2日に編集し、約 5 分で読めます。

サイトに新しく設置したバナー。
「このバナーって、何回クリックされているんだろう?」って思ったことありませんか?

今回は、設置したバナーごとのクリック数を計測する方法を解説します。
WordPress環境でも使用できるので、重宝します。

クリック数をカウントする方法

大きくわけて3種類の方法があります。

どの方法が良いかは、「設置したい数」や「HTMLを編集できるか」で違ってきますので以下で説明します。

HTMLにタグを追記する

「HTMLが編集できる」「数箇所だけに設置したい」という方に向いています。
また、ソースコードとして反映されるので、Git で全て管理したいという場合はこちらの方法を使用します。

この方法を使用する場合は注意が必要で、サイトに GoogleAnalytics を導入したときのタグによって、追記するコードが違います。

そのタグというのが、「analytics.js」「gtag.js」の2種類となります。

新しくAnalyticsを導入した方は、「gtag.js」を使用しているはずです。
すでにAnalyticsが導入されている場合は、「analytics.js」が使用されている場合があります。

「analytics.js」と「gtag.js」の違いや確認方法については、以下の記事で詳しく説明します。

gtag.js と analytics.js の違いと確認方法
自分のサイトにGoogleAnalyticsを導入した時のタグって、「gtag.js」か「analytics.js」どっちだっけ?とイベントトラッキングを使用したいときになるので、違いと確認方法を記載しておきます。イベントトラッキング...

Googleタグマネージャーで設定する

「多くの箇所に設置したい」「HTMLを編集するのが苦手だ」という方に向いています。

Googleタグマネージャーをサイトに導入し、タグマネージャーの管理画面から設定できます。

必要なもの

  • Google Analytics アカウント
  • テキストエディタ(メモ帳)などの、ソースコードを表示させるアプリ

計測する方法

HTML の aタグ(リンク用)に、計測用のコードを追加して、Google Analytics で確認するだけです。

計測用コード

クリック数の計測

<a href="" onclick="gtag('event', 'Click', {'event_category': 'banner', 'event_label': 'このイベントの名前', 'value': '0'});">

‘このイベントの名前’ のところには、’記事下広告’などのわかりやすい名前を付けてあげてください。
日本語でも可能です。

このコードを表示している広告などのバナーに入れてあげると、すぐに計測可能になります。

このコードはイベントトラッキングと呼ばれていて、通常の Google Analytics では計測できない行動を計測するための機能です。

WordPress 投稿画面に追記する際の注意点

WordPress の投稿画面で、onclick などのイベントトラッキングタグを追記して保存した場合、再度確認するとそのタグが消えている場合があります。
これは、WordPressの権限や仕様によるもので、以下の様な対策が必要になります。

WordPressのエディタ切替でタグ・コードが消えるのを防ぐテクニック
WordPressには、高機能なビジュアルエディタが標準でついています。 pタグで文章を囲ったり、imgタグやaタグのようなやたらと長いコードを打ち込まなくても、画像やリンクを数クリックで挿入できます。HTMLの仕組みが ...

Google Analytics で集計できているか確認する

リアルタイムでアクセスが確認できるサイトであれば、左メニューのリアルタイム → イベントで確認できます。

グーグルアナリティクス クリックイベント

リアルタイムのアクセスが無い場合は、自分でクリックしても確認できます。
この場合、Analyticsの設定で自分の端末はカウントしないという設定が反映されていることがあります。
スマホから確認する場合は、 Wi-Fi を使用せずにクリックしてみてください。
PCから確認する場合は、WordPressなどにログインしていないブラウザで、別ネットワーク(IP)からのアクセスをしてクリックすると確実です。

analytics.js イベントトラッキング解説

onclick="gtag('event', 'Click', {'event_category': 'banner', 'event_label': 'このイベントの名前', 'value': '0'});"

上記のコードを解説していきます。

onclick

JavaScript の書き方で、クリックされたときに実行するという記述です。

gtag(‘event’

Google Analytics にデータを送信する記述です。

Click

アクションの名前です。
自由に設定できるので、管理しやすい名前にしましょう。
今回はクリックしたというアクションになるので、Click にしています。

‘event_category’: ‘banner’

カテゴリの名前です。
自由に設定できるので、管理しやすい名前にしましょう。
今回はバナーなので banner にしています。

‘event_label’: ‘このイベントの名前’

ラベルの名前です。
自由に設定できるので、管理しやすい名前にしましょう。
「記事下広告」などの名前を入れてあげるとわかりやすいかと思います。

‘value’: ‘0’

です。
1回実行される毎にカウントをいくつ増やすかを決めることができます。
基本は0で良いですが、バナー毎に値を変えるとそのバナーに重要度みたいな重みを与えることも可能になります。

まとめ

これで、設置したバナーなどがクリックされた数がわかります。

タグ自体は簡単に設置できますが、Analyticsとの連携で手こずることも多々あります。
設定後は、しっかり集計できているか確認することが大事です。

集計できない場合は、「タグの記述ミス」や「Analytics導入時のタグが analytics.js か gtag.js なのか」などを疑ってみてください。
一つずつ解決すれば必ず集計できますので、諦めずにトライしてみてください。

この記事を書いた人
HISA

ホームページ作成をメモ帳時代からやってます。ゲーム大好き!「格闘ゲーム」や「デジタルカードゲーム」を好みます。大会にもチラホラ参加しています。

HISAをフォローする

WEBの事でお悩みなら、まずは一度 I-SEED にご相談ください!

I-SEED は 「デザイン」「SEOマーケティング」「システム開発」を併せ持つWEB制作会社です。

コーポレート、オウンドメディア、ECなど様々な分野のサイト制作を得意としています。システム開発も自社で行っているので、様々なプロジェクトに柔軟かつ迅速に対応できるのが強みです。

大阪に良いWEB制作会社がいないとお困りの方は、是非一度 I-SEED までご相談ください。

I-SEED では随時採用も行っています。各種エンジニア、ディレクター、デザイナー、ライター、マーケターの全職種を募集しています。ご興味がある方は採用ページもご覧ください。

ブログページに戻る