気になるリンクのクリック率はGoogleタグマネージャーで分かる

Googleアナリティクスではページ内にあるリンクコードのクリック率が分かるようになっています。しかし、外部サイトへのリンクについては分かりません。そこでタグマネージャーを使うと外部リンクのクリック数が一目瞭然。

テキストリンクかバナーリンクか、メインカラムかサイドカラムなど、位置やデザインによって変わるクリック率も把握でき、サイトのコンバージョンも向上します。

Googleタグマネージャーの設定

Googleタグマネージャーにアクセスし[今すぐ登録]をクリックしてGoogleアカウントで登録します。

タグマネージャー

タグマネージャーの管理画面に変わりますので、さっそくアカウントを作ります。
アカウントはサイト毎に作りますので、最初に作りたいサイト名など分かりやすい名前を付けます。

タグマネージャーのアカウント

「Googleや他の人と匿名でデータを共有」にチェックを入れると、同一業種などの平均的なデータとの比較などができるので、チェックを入れておきましょう。
[続行ボタン]を押して[コンテナ名]を設定します。コンテナ名はサイトのアドレスを入れると分かりやすいです。
つづいてコンテナの場所(ウェブかモバイルかなど)を設定し[作成]ボタンを押します。

「Google タグマネージャ利用規約」が表示されます。英語表記ですが「はい」ボタンは日本語ですので「はい」を押します。
下の画像のようなタグマネージャーのコードが発行されるので、指示にしたがってサイト内のすべてのページに貼りつけます。

*既に貼り付けているGoogleアナリティスクのコードは削除します。

タグマネージャーのコード

つづいてタグマネージャーで利用するタグの設定を行います。

タグの設定

最初に通常使用するGoogleアナリティスクのページビューの設定を行います。

アナリティスクのページビュー

Googleアナリティスクを選択します。

設定するサイトのGoogleアナリティスクトラッキングコードからIDをコピーして、タグマネージャーのタグの設定にペーストします。

トラッキングコード

最後にタグ名を「ユニバーサル アナリティクス」とつけて公開をします。

ユニバーサル アナリティクス

公開する前に、タグマネージャーのコードを貼りつけたサイトファイルをすべて更新して下さい。

タグの公開

外部リンクのクリックを調べる為の[変数の設定]

まず最初に行うのが[変数の設定]です。

変数はすでに通常のGoogleアナリティスクのページビューの変数が設定されています。

変数の設定

[変数]→[設定]ボタンを押して表示されるポップアップウィンドウから[Click URL]にチェックを入れます。

Click URL

[ユーザー定義変数]の[新規]ボタンを押します。
上の[設定]には先ほど設定した[Click URL]が表示されています。

ユーザー定義変数

[変数タイプを選択]で種類を「URL」にし、[要素タイプ]を「パス」にして保存します。名前を「URLPath」とします。

再び変数の設定画面に戻りますので、[ユーザー定義変数]の[新規]ボタンを押します。

変数タイプを選択

[変数タイプを選択]で種類を「自動イベント変数」にし、[変数タイプ]を「要素URL」にして保存します。名前は「element URL」にします。

つづいて3個目の変数設定です。

再び変数の設定画面に戻りますので、[ユーザー定義変数]の[新規]ボタンを押します。

[変数の種類]で「カスタムJavaScript」にします。

JavaScript入力フォームに次のコードをコピペし「linkURL」の名前で保存します。

function(){
    // クリックされた対象を jQuery オブジェクトに変換
    var $linkElement = jQuery({{linkElement}});
    // 前後の空白を除去してアンカーテキスト取得
    var text = $linkElement.text().replace(/^s+|s+$/g, "");
    // テキストリンクの場合はアンカーテキスト
    if (text) {
        return "text: " + text;
    }
    var alt = $linkElement.find("img").attr("alt");
    // 画像リンクの場合は altの文章
    if (alt) {
        return "image: " + alt;
    }
 
    // alt も取れない場合は遷移先のURL
    return "other: " + $linkElemtn.attr("htrf");
}

つづいて「linkURL」に関連する変数を設定します。

linkElement

[ユーザー定義変数]の[新規]ボタンを押し、[変数の種類]で「自動イベント変数」変数を「要素」にして名前を「linkElement」で保存します。

バナーリンクのalt=””に代替テキストが設定されていなければ計測できませんので、バナーリンクを確認して下さい。

以上で4つの変数を設定しましたがまとめると次のようになります。

URLPath
リンクをクリックした元ページのURLをパス表示
element URL
クリックしたリンクのリンク先URL
linkURL
クリックしたリンクのアンカーテキストや画像alt
linkElement
「linkURL」の変数設定

この4つの変数のうち、後でタグの設定で使用するラベルが次のコードになります。

{{URLPath}}|{{element URL}}|{{linkURL}}

コメント