【gtag.js】オンクリック属性を使ってバナークリック数をカウントしよう！

Googleアナリティクスはデフォルト設定だと、外部サイトリンクのクリックや電話ボタンのタップ、PDFのダウンロードなどは計測されません。

このようなアクションを計測できる機能のことを「イベントトラッキング」と呼びます。

イベントトラッキングを使うと、どの部分が何回クリックされたかを知ることが可能です。例えばホームページ上にバナーを設置した場合、どのバナーが何回クリックされたかもわかります。

今回は、gtag.jsとanalytics.jsそれぞれでオンクリック属性を使ったイベントトラッキングの設定方法を解説します。

gtag.jsの onClick属性を使うとクリック数をカウントできる

イベントトラッキングを使ってクリック数をカウントするには、gtag.jsのonClick属性を使用します。Googleタグマネージャーでも設定することは可能ですが、今回はHTMLに直接ソースコードを書き込んで測定する方法についてご説明致します。

オンクリック属性の設定方法

ここからは、gtag.jsとanalytics.jsのそれぞれを使ったonClick属性の設定方法を紹介していきます。

設定する前にトラッキングコードを判別しよう

onClick属性を設定する前に、自社サイトで設定しているGoogle Analyticsのトラッキングコードのバージョンを確認する必要があります。

Googleアナリティクスのトラッキングコードには「gtag.js」と「analytics.js」の2種類があります。

それぞれ、gtag.jsは新しいバージョンに使われるコード、analytics.jsは古いバージョンで使われるコードです。

自分のサイトがどちらのタイプなのかは、サイト上で右クリックをして「ページのソースを表示」をクリックして確認します。検索バーで「gtag」「analytics.js」を入力し、どちらが使われているかを調べましょう。

gtag.jsの場合

<!-- Global site tag (gtag.js) - Google Analytics --> 
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_*******_ID"></script> 
<script>
 window.dataLayer = window.dataLayer || []; 
 function gtag(){dataLayer.push(arguments);} 
 gtag('js', new Date()); 

 gtag('config', 'GA_*******_ID'); 
</script>

サイトにgtag.jsタイプが使われている場合は、上記のようなトラッキングコードが記述されています。上記の2行目に「gtag」の文字があるため、このコードはgtag.jsタイプのコードです。

analytics.js の場合

<!-- Google Analytics --> 
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 

ga('create', 'UA-*******-*', 'auto'); 
ga('send', 'pageview'); 
</script> 
<!-- End Google Analytics -->

analytics.jsタイプのサイトの場合は、上記のようなトラッキングコードが記述されています。上記の画像5行目に「analytics.js」の記述があるため、このコードはanalytics.jsバージョンのコードです。

analytics.jsタイプの詳細については、本記事内の【analytics.js】オンクリック属性の設定方法

で詳しく解説しています。ご自身のサイトがanalytics.jsタイプの方は、そちらをご覧ください。

gtag.jsタイプの設定方法

gtag.jsタイプでイベントトラッキングを設定するには、下記のコードを使用します。

onClick=”gtag(‘event’, ‘event_name’, {‘event_category’: ‘categoryName’, ‘event_label’: ‘labelName’, ‘value’: ‘actual_value’});“

カウントしたい外部サイトリンクやPDFのaタグにこのコードをいれるだけで、クリック数を計測することができます。

例えば予約用の電話番号リンクのタグを入れる場合は、このような書き方になります。

onClick=”gtag(‘event’, ‘CLICK’, {‘event_category’: ‘TEL’, ‘event_label’: ‘予約の電話’, ‘value’: ‘0’});“

実際に実装すると、このようなコードになります。

<a href=tel:123-456-7890 onClick=”gtag(‘event’, ‘CLICK’, {‘event_category’: ‘TEL’, ‘event_label’: ‘予約の電話’, ‘value’: ‘0’});“>123-456-7890</a>

onClick属性は、「event_name」「categoryName」「labelName」「actual_value」の4つの構成要素でできています。それぞれの要素が何を表しているかは、以下の通りです。

 event_name（値の型：テキスト）

「event_name」は、どういった行動なのか分類するための名前を入力する構成要素で、onClick属性には欠かせない必須要素です。例えば、どれくらいリンクがクリックされたかを計測したい場合は「CLICK」を、どれくらい動画が再生されたかを確認する場合は「PLAY」など任意のテキストを記します。

上記の例のコードは電話番号へのクリック数を測定したいため、「CLICK」と記しています。

event_nameは設定が必須の値です。何も入れていないと正確に計測されませんので注意しましょう。

 categoryName (値の型：テキスト)

「categoryName」は、イベントをカテゴリ分類するための名前を入れる値です。必須ではないため省くことができますが、入れておいた方がイベントを分類する際に便利です。

例えば、クリックすると電話をかけられる場合は「Telephone」、PDF資料のダウンロードが出来る場合は「PDF」や「Download」といった名前をつけて分類することができます。

上記例のコードでは、電話番号のトラッキングのため「TEL」と入れました。

 labelName (値の型：テキスト)

「labelName」は、イベントにラベル名の値を設定できます。イベントの分類を細分化する際に便利です。

例えば、資料ダウンロードにおいて「営業資料」「サービス資料」など複数の資料ダウンロードがある際にこのラベル値を使って何の資料がダウンロードされたか分類することができます。

この値も「categoryName」と同じく、必須ではありません。コードやリンクに対するコメントを入れておくことも可能です。

 actual_value（値の型：整数）

「actual_value」は、1クリックに対する価値を決めることができる構成要素です。例えば、顧客の単価が30万円で電話での問い合わせ成約率が10%の場合、1回電話番号をクリックする価値を3万円として設定することができます。

他の構成要素はテキストの入力ですが、「actual_value」だけは整数で入力する必要があります。価値を設定しない場合は、整数を0にするかコード自体を省略します。必須の値ではありません。

上記の例では価値を設定しないため、値を0に設定しています。

【analytics.js】オンクリック属性の設定方法

analytics.jsタイプのonClick属性コードは以下の通りです。

onClick=ga(‘send’, ‘event’, ‘eventCategory’, ‘eventAction’, ‘eventLabel’, ‘eventValue’);

gtag.jsタイプと同様、カウント数を測定したいリンクにこのコードを入れることで測定が可能です。

例として、取扱説明書のPDFのダウンロード回数を測定したい場合のコード例を見てみましょう。

onClick=ga(‘send’, ‘event’, ‘DOWNLOAD’, ‘CLICK’, ‘取扱説明書’);

実装すると下記のようなコードになります。

<a href=”http://xxxxx/xxxxxxxx.pdf” onClick=ga(‘send’, ‘event’, ‘DOWNLOAD’, ‘CLICK’, ‘取扱説明書’);“>取扱説明書はコチラから</a>

analytics.jsタイプに関しても、それぞれの値が何を表しているかを見ていきましょう。

eventCategory (値の型：テキスト)

「eventCategory」は、イベント分類のために名前を入れる構成要素で、analytics.jsタイプでは必須の値です。

例えば、電話に関するリンクの場合は「Telephone」、PDFがダウンロード出来る場合は「PDF」や「Download」といった任意のテキストを入れます。

上記例のコードではPDFのダウンロードを分類するため、「DOWNLOAD」と記載しています。

eventAction (型の値：テキスト) 

「eventAction」は、行動を分類するために名前を入力する値で、「eventCategory」と同じく必須値です。例えば、リンクのクリック数を計測したい場合は「CLICK」、電話ボタンのクリックを計測したい場合は「TEL」などと記します。

上記の例のコードはPDFリンクのクリック数を知りたいため、「CLICK」を使用しました。

eventLabel (型の値：テキスト)

「eventLabel」は、イベントを分類する時に使う値です。必須要素ではないため、分類しないときは使用する必要はありません。

例えばリンク先が外部リンクの場合は「外部リンク」、EXCELリンクの場合は「EXCELリンク」などと分類内容を明記するのに使用します。注意事項やコメントを入れる場合にも活用が可能です。

上記の例では取扱説明書だということを分かりやすくするために、日本語で「取扱説明書」と記しています。

eventValue (型の値：整数)

「eventValue」を使うと、1回のクリックに対する価値を決めることができます。例えば、顧客の単価が50万円で電話での問い合わせ成約率が20%の場合、1回電話番号をクリックする価値を10万円にするといった設定が可能です。

「eventValue」は他の値と異なり、整数で入力しなければいけません。必須要素ではないため、価値を設定しない場合は記述を省略するか整数の値を0にします。

上記の例では価値を設定しないため、記述を省いています。

Googleアナリティクスでイベントトラッキングを確認する方法

ここからは、イベントトラッキングが正しく実装されたかどうかをGoogleアナリティクスで確認する方法を解説していきます。

Googleアナリティクスに関する別記事はこちら
・Google Analytics イベントトラッキング機能の活用事例と設定方法
・Google Analyticsの見方をマスターしよう！

イベントの発生数を確認する

Googleアナリティクスにログインし、左メニューから「行動」→「イベント」→「ページ」を開きます。

表の項目にある合計イベント数とはイベント発生のトータル数で、イベントカテゴリごとの総数が表示されます。ユニークイベント数は同じアカウントのイベント発生回数を同一とみなした場合の数です。

上記の画面のようにイベント発生がカウントされていれば、問題なくコードの設定ができています。

イベント発生の流れを確認する

イベントトラッキングを活用すると、「イベントフローページ」からイベント発生の流れを確認することも可能です。

引用：DM SOLUTIONS

ユーザーがどのページに遷移したのか、最後にどんなイベントを行なって終着したのか、などページ遷移の内容を細かく確認ができます。

まとめ

外部サイトへのリンクやPDFダウンロードなどがデフォルトでは計測されないGoogleアナリティクスですが、onClick属性を使うことでイベントのクリック数を調べられることがわかりました。

onClick属性を設定する方法は、gtag.jsとanalytics.jsそれぞれのトラッキングコードバージョンによって異なります。自身のページがどちらのバージョンを使用しているか確認したうえで、コードを実装するようにしましょう。

onClick属性を設定すると、イベントの発生数やユーザー遷移歴まで分析することができます。ユーザーのアクションを可視化して効果的なサイト改善を図るためにも、イベントトラッキングの導入を検討してはいかがでしょうか。

執筆者：山本卓真

株式会社ヒトノテのSEOコンサルタント。中小企業から大企業まで様々な規模、業種のサイトのSEOに携わる。WEBマーケティングの広い知見と経験をもとにクライアントと伴走することが得意です。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。