SNS ボタンのクリック目標の計測 | Optimizely 正規代理店イー・エージェンシー

Optimizely X ヘルプ

  • 最終更新日:2017年02月24日

SNS ボタンのクリック目標の計測

FaceBook や Twitter などのシェアボタンですが、最終的なボタンの生成が iframe タイプの場合、そのままの状態ではゴールとして計測することができません。

ですが、少し JavaScript で調整することで計測は可能となりますので、その方法をご紹介します。

今回ご紹介するのは FaceBook と Twitter の2点です。

  1. 共通の設定
  2. FaceBook の場合
  3. Twitter の場合
  4. Optimizely のカスタムイベントにて計測の設定

共通の設定

スニペットコードの直下に下記の JavaScript を追加します。

<script>window['optimizely'] = window['optimizely'] || [];</script>

実際に記述すると下記のようになるかと思います。

<script src="https://cdn.optimizely.com/js/0123456789.js"></script>
<script>window['optimizely'] = window['optimizely'] || [];</script>

これで共通の設定は完了です。

FaceBook の場合

FaceBook の公式で公開されているコードを元にご説明します。

Like Button - Social Plugins - ドキュメンテーション - 開発者向けFacebook
https://developers.facebook.com/docs/plugins/like-button

<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

公式で公開されている上記のコードに続いて、計測用のイベントを飛ばす為の下記のコードを追加します。

<script>
    window.fbAsyncInit = function(){
        FB.Event.subscribe("edge.create", function(){
                window.optimizely.push(['trackEvent', 'faceBookBtnLike']);
        });
        FB.Event.subscribe("edge.remove", function(){
                window.optimizely.push(['trackEvent', 'faceBookBtnUnLike']);
        });
    };
</script>

「faceBookBtnLike」「faceBookBtnUnLike」の記述については、任意の名称 ( 半角英数字 ) に変更していただいて問題ありません。
前者が「いいね!」した場合、後者は「いいね!」を解除した場合を計測します。

Twitter の場合

まず、公式のジェネレータからボタンの種類を選択し、「コードのプレビューをみる」からコードを取得します。

Twitterボタン | About
https://about.twitter.com/ja/resources/buttons

コードを取得したら a タグの部分だけを残し、以降の JavaScript の部分は下記と差し替えます。

<script>
    window.twttr = (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
        t._e = [];
        t.ready = function(f) {
            t._e.push(f);
        };
        return t;
    }(document, "script", "twitter-wjs"));

    twttr.ready(function (twttr) {
        twttr.events.bind("click", function (){
            window.optimizely.push(['trackEvent', 'twitterBtnClick']);
        });
    });
</script>

「twitterBtnClick」の記述については、任意の名称 ( 半角英数字 ) に変更していただいて問題ありません。

Optimizely のカスタムイベントにて計測の設定

最後に送信されるイベントの受け皿となる目標設定を Optimizely の管理画面から行います。

[ 目標の設定 ] > [ 新しい目標の作成 ] から「追跡対象」を「カスタムイベント」に変更します。
「目標名」は任意の名称を、「追跡カスタムイベント」は本記事内の「faceBookBtnLike」「faceBookBtnUnLike」「twitterBtnClick」にあたる部分を入力し、保存します。
( 名称を変更している場合は、変更後の名称を入力ください )

後は、クリックやページビューと同様に実験の目標として設定することでSNSボタンを計測することができます。

設定は以上となります。
少々難しい内容の上にサイトへ直接手を加える必要があります為、サイトの管理者や技術者の方がいらっしゃいましたら、ご依頼いただいた方がよいでしょう。

Optimizelyのサポートに関するお問い合わせはこちらまで

コメントは受け付けていません。

ヘルプの関連記事

売り上げ金額の計測の設定方法 X版
投稿日: 2017年10月13日
どこまでスクロール(閲覧)されているか計測する方法
投稿日: 2017年09月21日
「何を実験するべきか?」を解決する7つのTips
投稿日: 2017年09月04日
Exclusion Groups(排他的グループ機能)の設定方法
投稿日: 2017年08月24日
Custom snippets(カスタムスニペット)の設定方法
投稿日: 2017年08月24日

ヘルプのよく読まれている記事