JavaScript」カテゴリーアーカイブ

[Adobe Analytics] Legacy s_code.js から AppMeasurement.js に乗り換える

もろもろ新機能を試したいので、s_code.js から AppMeasurement.js に乗り換えました。

やった事:

ファイル名は s_code.js のままで、 “DO NOT ALTER BELOW THIS LINE” のコメント行配下の本体を、 AppMeasurement.js の本体に貼りかえるというのが基本。

あと、 Media モジュールで動画計測してるので、モジュールを AppMeasurement_Module_Media.js + AppMeasurement_Module_Integrate.js の内容に貼りかえる。

次にプラグインの互換性についてはここで調べる。
https://marketing.adobe.com/resources/help/ja_JP/sc/implement/plugins_support.html
お、 getPageName プラグイン動くじゃーん、と思ってそのまま試したら s.wd がないとか s.fl がないなどエラーが出てきて怒られるので、下記のように一部を変更。

  • s.wd.location を location.href に置き換える
  • s_code.js から s.fl と s.pt を持って来る。

で、出来上がった getPageName プラグインがこれ。

/*
 * Plugin: getPageName v2.1 - for AppMeasurement.js
 */
s.getPageName=new Function("u",""
+"var s=this,v=u?u:''+location.href,x=v.indexOf(':'),y=v.indexOf('/',"
+"x+4),z=v.indexOf('?'),c=s.pathConcatDelim,e=s.pathExcludeDelim,g=s."
+"queryVarsList,d=s.siteID,n=d?d:'',q=z<0?'':v.substring(z+1),p=v.sub"
+"string(y+1,q?z:v.length);z=p.indexOf('#');p=z<0?p:s.fl(p,z);x=e?p.i"
+"ndexOf(e):-1;p=x<0?p:s.fl(p,x);p+=!p||p.charAt(p.length-1)=='/'?s.d"
+"efaultPage:'';y=c?c:'/';while(p){x=p.indexOf('/');x=x<0?p.length:x;"
+"z=s.fl(p,x);if(!s.pt(s.pathExcludeList,',','p_c',z))n+=n?y+z:z;p=p."
+"substring(x+1)}y=c?c:'?';while(g){x=g.indexOf(',');x=x<0?g.length:x"
+";z=s.fl(g,x);z=s.pt(q,'&','p_c',z);if(z){n+=n?y+z:z;y=c?c:'&'}g=g.s"
+"ubstring(x+1)}return n");
s.fl=function(x,l){return x?(''+x).substring(0,l):x};
s.pt=function(x,d,f,a){var s=this,t=x,z=0,y,r;while(t){y=t.indexOf(d);
y=y<0?t.length:y;t=t.substring(0,y);r=s[f](t,a);if(r)return r;
z+=y+d.length;t=x.substring(z,x.length);t=z<x.length?t:''}return ''};

あと、 s.getQueryParam じゃなくて、 s.Util.getQueryParam を使ってね、とヘルプに書いてあるので、 s.Util.getQueryParam を旧 s.getQueryParam にコピー

/*
 * Plugin: getQueryParam
 */
s.getQueryParam = s.Util.getQueryParam;

あちこち実装済みの s.getQueryParam をイチイチ s.Util.getQueryParam に書き換える必要はない。
※/* 20160831追記*/
このままだと第2・第3引数が正常に動作しないので、実はもうちょい工夫が要ります。
さらに、従来のs.getQueryParamのように、複数の引数をカンマ区切りで同時にセットする事も出来ません。
そこらへんも直す必要があります。
getQueryParam versus Util.getQueryParam

s.c_r と s.c_w は いまのところAppMeasurement でも動くので、そのままにしておく。

いまだに Target Classic 使ってるところは s.trackTNT プラグインを使う事もあるだろうけど、これも s.wd が見つからないというエラーが出るので、 s.wd を window に置換すれば良し。

とりあえず、プラグイン類は、 FormAnalysis 以外はちょいちょい弄れば AppMeasurement でも動きそうね。
FormAnalysis は DTM のイベントルール設定で似たような実装をする事も可能だろうけど、面倒だから今のところはスルー。

Google Tag Manager移行後もハードコードのイベントトラッキングを実行する

GTMに移行後、ページに直接onclick記述してるGAのイベントトラッキングが動かないと思ったら、「トラッカー名を設定する」のチェックが必要だった。

[タグを設定] > [高度な設定] > [トラッカー名を設定する] にチェックを入れるだけ。
[トラッカー名]のフィールドは空白のままでOK。

gtm

Facebookのいいねボタンや、Twitterのツイートボタンのクリックを計測する

5年前とはSDKの仕様が変わってたので、改めてSiteCatalystとGoogleAnalyticsを実装してみた。
こちらのページでテストしました。
http://www.kwonline.org/tst/social.php
下記の4つのボタンのクリックを計測してます。

  • Facebook
  • Twitter
  • はてなブックマーク
  • LINE

Facebook
Facebookは以前のall.jsじゃなくて、sdk.jsになってます。
FB.Event.subscribe関数を使う点はsdk.jsでも変わってません。

window.fbAsyncInit = function(){
	//sitecatalyst
	FB.Event.subscribe("edge.create", function(){
		s.linkTrackVars = "events,eVar1";
		s.linkTrackEvents = s.events = "event3";
		s.eVar1 = "facebook";
		s.tl(true, "o", "facebook");
		//google analytics
		ga('send', 'social', 'facebook', 'like', location.href);
	});
};

Twitter
Twitterは通常のボタン設置方法じゃなくて、developerサイトに載ってるscriptに変える必要があります。
https://dev.twitter.com/web/javascript/loading

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"));

上記のスクリプトに変えた上で、下記のようにclickイベントにバインドします。

twttr.ready(function (twttr) {
	twttr.events.bind("click", function (){
		//sitecatalyst
		s.linkTrackVars = "events,eVar1";
		s.linkTrackEvents = s.events = "event3";
		s.eVar1 = "twitter";
		s.tl(true, "o", "twitter");
		//google analytics
		ga('send', 'social', 'twitter', 'click', location.href);
	});
});

はてなブックマーク & LINE
「はてなブックマーク」と、「LINEに送る」ボタンはコールバック関数がないので、
勝手にclass属性をつけて、JQueryでclickイベントにバインドするという、実装にしました。
もっとスマートなやり方はあるんだろうか。

onclickで実行する関数内から自分自身の要素を取得する

JQueryとか使えば簡単なんだろうけど、なくても出来た。

他人様のサイトなのでHTMLソースをいじれない事情があり、
idもclassもJQueryもない状況でonclickで実行する関数内から自身のhrefを取得したかった。

<a onclick="hoge()" href="http://www.google.co.jp/">test</a>

というAタグがあるとする。

hoge = function() {
  var e = (window.event)? window.event : arguments.callee.caller.arguments[0];
  var self = e.target || e.srcElement;
  console.log(self.href);
};

これでhref属性がコンソールにoutputされる。

参考にしたサイトはこちら。
【javascript】onclickされた時のthis(自分自身)を取得したい。 | げことじ。

[Adobe Analytics] HTML5動画計測

SiteCatalystの頃から使われている動画計測手法、Milestone型計測を使って、HTML5動画計測を実装したサンプルコードを載せておきます。
Video Tracking Test

ちなみに上記テストページに載せている動画はオープンソースの3DCGソフトウェアBlenderで作成された「Big Buck Bunny」というムービーです。
Big Buck Bunny – Wikipedia, the free encyclopedia

実装したコード:

s.loadModule("Media");
s.Media.trackWhilePlaying = true;
s.Media.segmentByMilestones = true;
s.Media.playerName = "My_HTML5_Player";
s.Media.trackVars="events,eVar11,eVar12";
s.Media.trackEvents="event11,event12,event13";
s.Media.trackMilestones = "25,50,75";
s.Media.trackUsingContextData = true;
s.Media.contextDataMapping = {
	"a.media.name" : "eVar11",
	"a.contentType" : "eVar12",
	"a.media.timePlayed" : "event11",
	"a.media.view" : "event12",
	"a.media.complete" : "event13"
};

function playerHandler(e){
    if (myvideo.currentTime > 0) {
        currentTime = myvideo.currentTime;
    }
    switch(e.type){
        case "play":
            if(!videoOpened){
                s.Media.open(myvideo.src, myvideo.duration, s.Media.playerName);
                s.Media.play(myvideo.src, 0);
            }else{
                s.Media.play(myvideo.src, currentTime);
            }
            videoOpened = true;
	    break;
        case "pause":
            s.Media.stop(myvideo.src, currentTime);
	    break;
        case "ended":
            s.Media.stop(myvideo.src, currentTime);
            s.Media.close(myvideo.src);
	    break;
        default:
	    break;
    }
}

if (document.getElementById("myvideo")) {
	var videoOpened = false;
	var currentTime = 0;
	var myvideo = document.getElementById("myvideo");
	myvideo.addEventListener("loadedmetadata",playerHandler,false);
	myvideo.addEventListener("play",playerHandler,false);
	myvideo.addEventListener("pause",playerHandler,false);
	myvideo.addEventListener("ended",playerHandler,false);
}

新しい計測手法のHeartbeat型計測は別の機会にやってみます。

Unicode Escape Sequence 変換ツール

昔PHPで書いたUnicode Escapeツールを載せてましたが、今度はJavaScriptで書いたので載せます。

Unicode Escape Sequence 変換ツール

日本語などのマルチバイト文字を\uXXXX形式にUnicodeエスケープします。

こういう風にエスケープ出来ます。

/* テスト */
var hoge = 'ほげ';
alert(hoge);

/* \u30c6\u30b9\u30c8 */
var hoge = '\u307b\u3052';
alert(hoge);

ASCIIコード127番以上の文字だけエスケープするので、空白や改行、半角記号などはエスケープしません。
Unicodeエスケープした文字列をアンエスケープして戻す事も出来ます。

Firefox32でしか動作確認してないので、addEventListenerに対応してない昔のIEでは動作しません。

ソースですが、Escapeを行う部分はこうなってます。

var escapeUnicode = function(str) {
    var code = '';
    var head = {1: '\\u000', 2: '\\u00', 3: '\\u0', 4: '\\u'};
    return str.replace(/[^\x00-\x7F]/g, function(c) {
        return head[(code = c.charCodeAt(0).toString(16)).length] + code;
    });
};

エスケープした時に、\uXXXXの4ケタになるように、頭に0を付けて詰めてます。
また、マルチバイト文字だけエスケープして、シングルバイトの記号はエスケープしないように、ASCIIコード127以下の文字は置き替えません。正規表現[^\x00-\x7F] の部分です。
16進数の7Fは、10進数の127なので、つまり0から127に該当しない場合だけ変換します。

つづいてUnesacpeを行う部分はこうです。

var unescapeUnicode = function(str) {
  return str.replace(/\\u([a-fA-F0-9]{4})/g, function(m0, m1) {
    return String.fromCharCode(parseInt(m1, 16));
  });
};

正規表現で\uXXXXを表すと\\u([a-fA-F0-9]{4})なので、このパターンに一致する部分を変換する、という仕組みです。