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

タイトルではアフィリエイトと入れていますが、重要ランディングページなどを作成して、お問い合わせや商品購買、などなどサイトの目的に応じて様々なケースが考えられます。

基本的な事項として、ユーザーの動きを把握したい場合はGoogleアナリティクスを入れていると思いますが、更に細かく判断するにはボタンやテキストリンク、バナーなどにイベントを仕込むことによってトラッキングします。

Googleアナリティクスでページごとの滞在時間などトラッキングをするのはもちろんのこと、ページ内の特定のリンクごとに分析したいことがあります。そういう場合に使えるメソッドが必要になったので、コピペでできるイベントのトラッキング方法について書いておきます。

jQueryを使ってGAのイベントトラッキングとページの分析

まずはコードを記載しておきます。GAでそのまま取得できるスクリプトにちょっと変更を加えています。
なので、少し長くなってしまっていますので、分割しておいた方が良いかもしれません。

    (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','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-xxxxxxxx-1', 'auto');
    ga('send', 'pageview');

    function getUrl(){
        return location.href.replace(/\#.*$/, '').replace(/\?.*$/, '');
    }

    $('.js-gaTracker').on('click',function(e){
        e.preventDefault();
        var elementId = $(this).attr('data-gaClickId') || "none";
        var href = $(this).attr("href");
        var currentUrl = getUrl();
        ga('send',{
        hitType: "event",
        eventCategory: currentUrl,
        eventAction: "click",
        eventLabel: elementId,
        hitCallback: function(){
          if(href) location.href = href;
        }
        });
    });

トラッキングしたいHTMLに下記のようにコードを書きます。
HTMLのclassにjs-gaTrackerを追加して、data要素にnote-writingと記述しています。これは、例えばnoteの売り上げを公開している記事のnoteのページへのリンクをトラッキングしていて、これがクリックされるnote-writingが計測されます。

<a class="p-contact-btn js-gaTracker" data-gaclickid="note-writing"  href="https://note.mu/rplay_mag/n/n7a07662650b0">noteで売り上げの詳細をみる</a>

外部リンクの場合どこのページからどこに遷移しているのかわかりにくいですし、イベントトラッキングをしなければわかりません。売り上げや優良なコンテンツ、何かの施策をやる場合にイベントトラッキングをリンクに仕込んで、デザインやレイアウト、配置などの改善に役立てるという意味があります。

上記のリンクを実際リアルタイムでトラッキングしている例。
実際にリンクにclassとdata要素を追加したらクリックしてみて、ちゃんとトラッキングできているか確認してみましょう。
ちなみに上記のJSのソースコードでは外部リンクの時にblankさせていませんので、その場合は少し書き換える必要があります。

JavaScriptのソースコードの解説

まず、Googleアナリティクスでトラッキングしたい要件を洗い出します。今回は下記の二つだけだったので、これだけしか書いていません。他に追加したい項目がある場合は書き方を変えてみてください。

下記のコードでまず現在のURLを取得します。getUrl関数です。
ここでは関数化していますが、特に他では使いまわさない場合はコードを変えてしまっても構いません。
このような現在のURLを取得するものは結構使うので一応関数化しています。

    function getUrl(){
        return location.href.replace(/\#.*$/, '').replace(/\?.*$/, '');
    }

下記のコードが本題で、リンクに付与したclassであるjs-gaTrackerをクリックした場合に、そのaタグについている要素を見に行っています。あとはGoogleアナリティクスを入れる時に用意されているGAの関数で所定のコードを書くだけです。かなりシンプルにしているので、これをコピペしていただければ使えるかと思います。

    $('.js-gaTracker').on('click',function(e){
        e.preventDefault();
        var elementId = $(this).attr('data-gaClickId') || "none";
        var href = $(this).attr("href");
        var currentUrl = getUrl();
        ga('send',{
        hitType: "event",
        eventCategory: currentUrl,
        eventAction: "click",
        eventLabel: elementId,
        hitCallback: function(){
          if(href) location.href = href;
        }
        });
    });

GoogleアナリティクスはWebマーケティングには必須

以上簡単なコードでイベントのリンクをトラッキングする方法をご紹介いたしました。

既にサイト制作が非常に簡単になって、みんな自分でブログをWordPressなどで作成してアフィリエイトを始めたり、また企業に勤めている人であれば、ランディングページやECサイトなどの購入ボタンのリンクの色やバナーのデザインなどを分析することによって、大きなビジネス的なインパクトがあることもあります。

なので、現代は作ることよりも「分析してそれをいかにビジネスに繋げるか」という事の方が大切です。

作ったとしても商品の売れ行きが悪い、このキャンペーンは失敗した、このサービスのここが肝だけど伸ばせていないということでサービスがクローズしてしまったり、ビジネスが終わってしまうというケースもあります。

細かいことではありますが、ボタンやリンク・バナー、レイアウト、デザインなどの調整を少しずつ積み重ねることによってよりユーザーライクなサイトやサービスが完成していきます。

ユーザーに求められるサイトやサービスになるように今回のイベントトラッキングなどを有効活用してみてください。