More Related Content
Similar to 03 piggyback -by-simple-code-public
Similar to 03 piggyback -by-simple-code-public (20)
03 piggyback -by-simple-code-public
- 2. 自己紹介
* 清水 伸泰
* 株式会社インタースペース
* Sierを経て、現在インタースペースで7年
* AccesstradeAdPlatform上に乗る新プロダクト
の開発PMをしています。
* 運用面では全社のP/L周りを面倒見てます。
- 6. 1. piggybackとは
<script type=“text/javascript” src=“https://example.com/js/piggy.js?pt=ABC0123"></script>
Webページにjavascriptタグを貼り、
ブラウザがページを読み込むと、
<script type=“text/javascript” src=“https://example.com/js/piggy.js?pt=ABC0123"></script>
<script type=“text/javascript” src=“https://dummy.abc.net/abc.js?id=3738"></script>
<img style=“width:1px;height:1px;” src=“https://img.jp/test/?id=abc”>
・
・
・
次々に別のタグが呼び出され実行されます。
- 21. 2. javascript開発時の注意点
var ns_piggy = (function () {
var EXEC_URL = "https://example.net/ex.n?callback=ns_piggy";
function addListener(element, eventType, functionP, capture) {
if (element.addEventListener) {
// IE9以降、その他ブラウザ
element.addEventListener(eventType, functionP, capture);
} else {
// IE8以前に対応
element.attachEvent('on' + eventType, functionP);
}
}
addListener(window, “load”, 処理開始メソッド, false);
function startNode(result) {}
var element = this;
return function (result) { startNode.apply(element, arguments);};
}());
例えば、
ページ読み込み完了後、処
理を開始する
即時関数を使用してスコー
プをローカルに限定
マルチブラウザに対応
- 25. // イベントリスナーセット
function addListener(element, eventType, functionP, capture) {
if (element.addEventListener) {
// IE9以降、その他ブラウザ
element.addEventListener(eventType, functionP, capture);
} else {
// IE8以前に対応
element.attachEvent('on' + eventType, functionP);
}
}
// ページロード完了後、prepareNode()を実行する
addListener(window, “load”, prepareNode, false);
①ページ読み込み完了後、処理を開始する
3. piggyback処理仕様
- 26. <!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src=“https://example.com/js/piggy.js?pt=ABC" type="text/javascript"></script>
</head>
<body>
<script type=”text/javascript” src=“https://example.net/ex.n?callback=ns_piggy&pt=ABC"></script>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src=“https://example.com/js/piggy.js?pt=ABC" type="text/javascript"></script>
</head>
<body>
</body>
</html>
②APIを実行してデータを受け取る
3. piggyback処理仕様
- 27. var EXEC_URL = "https://example.net/ex.n?callback=ns_piggy";
function prepareNode() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = EXEC_URL + javascriptのパラメータ値;
body = document.getElementsByTagName("body")[0];
body.appendChild(script);
}
②APIを実行してデータを受け取る
3. piggyback処理仕様
- 28. <!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src=“https://example.com/js/piggy.js?pt=ABC" type="text/javascript"></script>
</head>
<body>
<script type=”text/javascript” src=“https://example.net/ex.n?callback=ns_piggy&pt=ABC"></script>
<script src="https://dummy.abc.net/abc.js?id=3738&211" type="text/javascript"></script>>
<img src="https://img.jp/test/?id=abc&210" style="width: 1px; height: 1px;">
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src=“https://example.com/js/piggy.js?pt=ABC" type="text/javascript"></script>
</head>
<body>
<script type=”text/javascript” src=“https://example.net/ex.n?callback=ns_piggy&pt=ABC"></script>
</body>
</html>
③受け取ったデータを元にタグを組み立て、
ビーコンを実行する
3. piggyback処理仕様
- 29. function createNode(result) {
var element = document.createElement(result.tag);
if (result.src) { element.src = result.src; }
if (result.type) { element.type = result.type; }
if (result.style) { element.style = result.style; }
body.appendChild(element);
}
■jsonpレスポンス
ns_piggy({
"nstag": [
{ "tag": "script",
"src": "https://dummy.abc.net/abc.js?id=3738",
"type": "text/javascript",
"style": ""
}
] })
③受け取ったデータを元にタグを組み立て、
ビーコンを実行する
3. piggyback処理仕様
- 30. javascript(piggy.js)の中身
var ns_piggy = (function () {
var EXEC_URL = "https://example.net/exec.json?jsoncallback=ns_piggy";
var SELF_URL = "https://example.com/js/piggy.js";
var body;
function prepareNode() {
var scripts = document.getElementsByTagName("script");
var parameter = "";
for (var i = 0; i < scripts.length; i++) {
if (scripts[i].src.indexOf(SELF_URL) == 0) {
var data = scripts[i].src.split("?");
if (data.length === 2) {
parameter = "&" + data[1];
}
break;
}
}
body = document.getElementsByTagName("body")[0];
var script = document.createElement("script");
script.src = EXEC_URL + parameter + "&" + new Date().getMilliseconds();
body.appendChild(script);
}
function createNode(result) {
var element = document.createElement(result.tag);
if (result.src) { element.src = result.src + "&" + new Date().getMilliseconds(); }
if (result.type) { element.type = result.type; }
if (result.style) { element.style = result.style; }
body.appendChild(element);
}
function startNode(result) {
if (result.nstag) {
for (var i = 0; i < result.nstag.length; i++) {
(function (arg) { window.setTimeout(function () { createNode(arg);}, 0); }(result.nstag[i]));
}
}
}
function addListener(element, eventType, functionP, capture) {
if (element.addEventListener) { element.addEventListener(eventType, functionP, capture); }
else { element.attachEvent('on' + eventType, functionP); }
}
addListener(window, "load", prepareNode, false);
var element = this;
return function (result) { startNode.apply(element, arguments);};
}());
