Studio Happyvalley

どのくらい
クリックされたか
調べる

問合せや、メニューなどのボタンが
どのくらいクリックされているのか
正確に調べる

image: どのくらいクリックされたか調べる
Count Clicks

新設したボタンがどのくらいクリックされているのか
調べたい

 | 2021/10/31

リンク要素へdata属性を記述

アクセスログを自前で作ってもいいですが、Googleアナリティクスを利用する方が簡単です。
まず、リンク要素へdata属性を記述します。
googleアナリティクスの場合は次の3つのパラメータを使用します。

action:Google アナリティクスのイベント レポートでイベント アクションとして表示される値。
category:イベントのカテゴリ。
label:イベントのラベル。

例えばこんな感じでリンクへ追加します。

 <a data-c="お薦めスライダーリンク" 
data-a="innerPageTransition" 
data-l="clickorscroll -> clearedsidebar" 
href="#">

これをjavascriptでデータ属性値を取得して、
googleアナリティクスのコードへ送信します。

アナリティクスへの送信方法

下記のようなオブジェクトリテラルでデータを送信することができます。
※これはgtag.js用のスクリプトです。

gtag('event', 'action値', {
  'event_category' : 'category値',
  'event_label' : 'label値'
});

https://studio-happyvalley.com/wp/wp-content/uploads/Image-10.png

コード設置後はアナリティクスの「リアルタイム」→「イベント」ですぐに確認できます。

上はGoogleアナリティクス「リアルタイム/イベント」での表示サンプルです。
日本語もそのまま反映されるのであえて英語にする必要はありません。
自分の分かりやすい名称に変更するといいですね。

せっかく作ったコンテンツ、
どのくらい見られてるのかな

コンテンツがどのくらい見られてるのか調べるのにも利用できます。
コンテンツの見出しと本文を20~40文字くらい表示させ、残りはクリックで表示。という風にします。俗にいうアコーディオンですね。
興味のあるコンテンツはクリックしないと読めない仕様です。
こうするとクリック数を調べることでどのくらい見られているのか把握することができます。
また、ページの天地を短くできるメリットもあります。
他にスクロールイベントを利用する方法もありますが、こちらだとスクロールで自動的にコンテンツが開くので、正確性が失われます。

gtag()でgoogleに紐づける

『どのくらいクリックされたか調べる』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら

Permanent Exhibition