みなさんはGoogleアナリティクスのイベントタグをご存知でしょうか?
イベントタグは、Webサイトでどのリンクがクリックされたかを計測できるように、ページに埋め込むタグです。外部リンクやバナー画像などによく利用されます。
全体のクリック数が分かっても、内訳が分からないと改善ポイントが把握できません。テキストリンクの文字列や設置位置によるコンバージョンの違いを比較し、改善していくためにイベントタグの活用はおすすめです。
イベントタグ設置の際、少し工夫が必要な部分がありましたので、忘れないように残しておこうと思います。
新旧どちらのアナリティクスコードかを調べる
まず前提として、Webサイトに埋め込んでいるGoogleアナリティクスのコードが、新コード(ユニバーサル)なのか、旧コードなのかを確認します。これは後ほどご説明するイベントタグのパターンに影響するためです。
見分け方はアナリティクスのコード内に以下どちらの記述があるのかで判別できます。
- 新コード:「analytics.js」が含まれている
- 旧コード:「ga.js」が含まれている
注意が必要なのは、少し古めのWordPressテーマを使用し、さらにその管理画面でGoogleアナリティクスのコードの数字部分だけを登録してアクセス解析している場合です。
アナリティクスの管理画面では新コードを発行していても、WordPressから生成された時点で旧コードとして配置されてしまっていることがあります。
ですので、コードの新旧を判断する際は実際に公開された記事のソースを見るようにしてください。
イベントタグの準備
Googleアナリティクスの新/旧コードが確認できましたら、設置するイベントタグを準備します。
アナリティクスコードの新/旧によってイベントタグのコードが異なりますので注意してください。
A. アナリティクスが新コード(ユニバーサル)の場合
アナリティクスが新コード(ユニバーサル)の場合はイベントタグは以下の形式になります。こちらを計測する対象の<a>タグ内に追加します。
onClick="ga('send','event','カテゴリ名','アクション名','ラベル名');"
カテゴリ名、アクション名、ラベル名は任意の名称(日本語も英数字も可)でOKです。考え方としては「大分類:中分類:小分類=カテゴリ:アクション:ラベル」になります。
それぞれの単位ごとにアナリティクスでデータ抽出できますので、自分が管理しやすいような分類を考えてみてください。
B. アナリティクスが旧コードの場合
アナリティクスが旧コードの場合はイベントタグは以下の形式になります。こちらを計測する対象の<a>タグ内に追加します。
onClick="_gaq.push(['_trackEvent','カテゴリ名','アクション名','ラベル名']);"
カテゴリ名などについては上の新コードの場合と同じルールです。
イベントタグを設置する
イベントタグは記述方法によって書き方が異なりますので注意してください。
A. htmlやphpファイルに直接記述する場合
イベントタグをhtmlやphpファイルに直接記述する場合は特に注意することはありません。先ほどご紹介したイベントタグ(新コードまたは旧コード)をソース内に設置してください。
※こちらのパターンの場合は、後ほど説明するショートコード化の解説部分は必要ありませんので読み飛ばしていただいて大丈夫です。
B. WordPressの投稿画面に記述する場合
注意が必要になるのはWordPressの投稿画面に記述する場合です。私も最初、ここでつまづきました。
↓こちらの編集画面ですね
WordPressの投稿画面で「テキストエディタ」にした状態でイベントタグを設置し、次に「ビジュアルエディタ」に戻すと、設置したはずのイベントタグが消えてしまうというバグ(仕様?)があります。
唯一、消えないようにするには「テキストエディタ」のまま、ずーーーっと編集を続けることですが、何かのタイミングで「ビジュアルエディタ」に切り替えてしまうこともあると思います。
そのときに「あっ」と思っても、これまで埋め込んだイベントタグは一瞬で消えてしまいます。消えるのはそのときに開いていた記事だけですが、それでも悲しすぎますよね。またイベントタグを埋め込みし直さなければいけません。
ですので、そのようなリスクを負わなくていいようにWordPressの投稿画面に設置する場合は、イベントタグをショートコード化します。
ちなみにイベントタグのみをショートコード化するというよりは、その<a>タグごとショートコード化します。
ショートコードの準備
WordPressでショートコードを利用するには「functions.php」を編集します。各テーマのフォルダに入っています。このfunctions.phpは、間違った記述をするとサイトが真っ白になって表示されなくなりますので、必ず元ファイルをコピーしてから編集するようにしてください。
今回は、functions.phpで記述したイベントタグ(<a>タグ全体)のソースをWordPress編集画面から呼び出すという仕組みを作ります。
functions.phpに記述する際には以下のフォーマットの通りに書きます。
<?php function aiueo() { return ' イベントタグ(<a>タグごと)を記述 '; } add_shortcode('kakikukeko', 'aiueo'); ?>
「aiueo」:ファンクション名(任意の名称でOK)
「kakikukeko」:呼び出し時のショートコード名(任意の名称でOK)
ここで、また面倒なことにイベントタグをそのまま設置するとエラーになるので、ちょっとした工夫が必要になります。どんだけ一筋縄でいかないんでしょうね…苦笑
原因としてはイベントタグ内の「’」(シングルクォート)が影響していますが、ここでの詳細な説明は省略させていただきます。そういうものと理解しておいていただければと思います。
対処方法はイベントタグ内のシングルクォートをエスケープします。
「もう何言ってるか分からない」と思われる方は意味を知る必要はありませんので、手順だけ知ってもらえればできますので安心してください。
イベントタグ内にあるシングルクォートの直前に「/」(バックスラッシュ)を記述します。windowsの場合は通常のままだとバックスラッシュは入力できませんが、ひらがなの「ろ」を押したときの「\」が同じ役割になります。
イベントタグ内のすべての「’」前に「/」(または「\」)を設置した場合はこのような記述になります。以下はアナリティクスが新コードの場合の例です。
<a href="###" onClick="ga(\'send\',\'event\',\'カテゴリ名\',\'アクション名\',\'ラベル名\');">詳しくはこちら</a>
※旧コードの場合も記述ルールは同じです
先ほどのショートコードのフォーマットと、実際のイベントタグを組み合わせると全体としては、以下のようになります。これをfunctions.phpに記述します。
<?php function aiueo() { return ' <a href="###" onClick="ga(\'send\',\'event\',\'カテゴリ名\',\'アクション名\',\'ラベル名\');">詳しくはこちら</a> '; } add_shortcode('kakikukeko', 'aiueo'); ?>
これでショートコード化の準備は完了です。元々あったfunctions.phpに上書きしてください。
くどいですが、functions.phpの元ファイルはコピーして保存しておいてくださいね。記述に失敗していたら画面が真っ白になりますので、すぐに戻せるようにしておきましょう。
後は、WordPress投稿画面からこのコードを呼び出すだけです。
WordPress投稿画面からショートコードを呼び出す
ショートコードの呼び出し方法はとてもシンプルです。
WordPress投稿画面でショートコードを呼び出したい箇所に対象のショートコード名を記入します。
記述ルールはショートコード名を [] ではさむということだけです。「ビジュアルエディタ」でも「テキストエディタ」でもどちらでも構いません。
先ほど作成した例ですと
[kakikukeko]
と記述すれば、WordPressから記事が生成されたときに指定したショートコードのソースがその部分に入ってくれます。
発生したイベントを確認する
ここまでの準備が完了すれば、Googleアナリティクスでクリックされたイベントを計測することができます。
Googleアナリティクスでイベントを確認するには「行動>イベント」を選択します。「サマリー」「上位のイベント」「ページ」のどれでも見ることができますので、お好きなレポートでチェックしてください。
なお、イベントタグがクリックされてもすぐには反映されません。数分~数十分のタイムラグがありますので焦らずに待ちましょう。
イベントタグがクリックされて1時間以上経過してもレポートに反映されない場合はタグの記述が間違っている可能性もあります。その場合は一度ソースをチェックし直すのもよいでしょう。
また、フィルタを使って自宅IPアドレスからのアクセスを除外している場合は、何回テストでクリックしても反映されませんので、うっかりミスをされませんように(笑)
最後に
Googleアナリティクスのイベントタグを活用することで、Webサイトに設置している各リンクの効果を計測することができます。
リンクの文字列はどちらのほうがコンバージョンが上がるのか、どこに設置しているボタンがクリックされているのかなど、改善に必要なデータを収集することができます。
設置の際は少しだけ事前準備が必要になりますが、一度設定しておけば頻繁には編集することもありませんので、サイト改善を重視されている方はお試しになってはいかがでしょうか。

ジムで使えるLINEスタンプです