phpテンプレなどの動的ページでGoogleアナリティクスのコンバージョンを設定する方法

2017.02.10
技術ブログ

WordPressやphpのテンプレなどで動的に生成されるホームページで、コンタクトフォームやユーザ登録ページの画面遷移が同じURLの場合のGoogleアナリティクスコンバージョン設定の方法をご紹介します。

こんな時に使えます

コンタクトフォームの送信完了ページやサンクスページを別途作っていない（フォームの画面に送信完了のメッセージが表示されるなど）
同一URLで画面遷移するフォームなどで、最終的な完了のときのみ、コンバージョンをとりたい。
特定の要素が読み込まれたときにコンバージョンを測定したい

通常のコンバージョン設定と何が違うのか

通常は、サンクスページ等の到達ページを設定したり、onLoadやonFocusなどのイベントハンドラでアクションで設定を行うのですが、動的に生成されるページの場合、多くはヘッダーやフッターが共通化され、<body onLoad=“処理”>を固有のページのみでは利用できません。

その他のイベントハンドラもユーザが必ずそのアクションを起こすとは限らないため、特定の要素が読まれた場合にコンバージョンが発生するように設定しなければなりません。

しかし、onLoadイベントを指定できる要素は、body要素、frameset要素のみです。

<div>要素でonLoad使用したい！！と思うこともしばしば・・・

そこでJavaScriptで<div>や<span>、その他の要素でもonLoadを使えるようにしてしまいます。

jsの設置と設定のしかた

サイト「たかみんつ」さんが最適で素晴らしいJavaScriptを公開してくださっているので、サイト内の「allonload.js」をダウンロードまたはコピーさせてもらいましょう！！

ダウンロードまたはコピーしてきたスクリプトをjQueryの後に読み込み、貼り付けるだけです。

あとは、コンバージョンさせたい要素にonLoadでアナリティクスのイベント条件を記載するだけです。

例：動的に送信完了メッセージを表示する際の、完了コンバージョン設定

<div class=”thanks_msg” onLoad=”ga(‘send’, ‘event’, ‘form’, ‘load’, ‘contact’, null, true);”>
　<p>お問い合せを送信しました。</p>
</div>

↓アナリティクスの設定画面

コンバージョンイベント設定

目標の詳細で、それぞれ対応する値を入力します。

入力する値については、以下で説明しています。

イベントトラッキングコードの設定について解説

イベントトラッキングコードは、クリックやウンロードされた回数を測定（トラッキング）する目的で使用しますが、うまく目標設定することで様々な用途で、細やかなの目標値取得が可能です。フォーム入力中の離脱や、ページのどの部分で離脱したのか？なども計測可能なので、サイトの改善やユーザビリティの改善のヒントを知ることができます。

＜それぞれの要素の意味＞

ga(‘send’, ‘event’, [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

send, event	：	グーグルアナリティクスで計測するための決まった要素なのでそのまま書きます。おまじないです。
eventCategory	：	通常はインタラクションに使用されたオブジェクト名を付けます。計測しやすいようにグループ化するため名前（任意）をつけます。
eventAction	：	アクションに名前（任意）をつけます。イベントハンドラに対応した名前をつけておくとわかりやすいです。
eventLabel	：	入力は必須ではないですが、ユニークな情報をとりたいときや分類するときに便利です。
eventValue	：	入力は必須ではありません。イベントに関連する数値を入力できます。
fieldsObject	：	インタラクション以外のイベント（ノンインタラクションをTRUEにすると、直帰率にイベントが影響しなくなります。）