導入方法

下記の3ステップでWebView上でのイベントトラッキング機能の組み込みをすることができます。

1. Webサイトへの組み込み

HTMLのheadタグの中に下記のスクリプトタグを組み込みます。

組み込みタグ

<script type="text/javascript">
/** FANSHIP EVENT TRACKER v3 */
!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}({4:function(e,t,n){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var r,i,u,c,s,f;if(t.__esModule=!0,n(5),(null===(r=window.PopinfoWebInterface)||void 0===r?void 0:r.trackEvent)||(null===(c=null===(u=null===(i=window.webkit)||void 0===i?void 0:i.messageHandlers)||void 0===u?void 0:u.popinfo)||void 0===c?void 0:c.postMessage)){var p=window.document.location.hash.split("&").map((function(e){return e.split("=")})).reduce((function(e,t){var n=t[0],o=t[1];return e[n.replace("#","")]=o,e}),{}),a=window.document.cookie.split(";").map((function(e){return e.trim().split("=")})).reduce((function(e,t){var n=t[0],o=t[1];return e[n]=o,e}),{}),l=window.document.createElement("script");l.async=!0,(null===(s=window.PopinfoWebInterface)||void 0===s?void 0:s.getEnvInfo)?l.src="https://sdk.fanship.jp/web/event-tracker/3/fanship-event-tracker.js":a["JP.FANSHIP.POPINFO_ID"]&&a["JP.FANSHIP.APPLI_ID"]&&a["JP.FANSHIP.DEVICE_TYPE"]&&a["JP.FANSHIP.P_MODEL"]&&a["JP.FANSHIP.P_OS_VER"]||p.popinfoId&&p.appliId&&p.deviceType&&p.pModel&&p.pOsVer?l.src="https://sdk.fanship.jp/web/event-tracker/2/fanship-event-tracker.js":l.src="https://sdk.fanship.jp/web/event-tracker/3/fanship-event-tracker.js";var d=window.document.getElementsByTagName("script")[0];null===(f=d.parentNode)||void 0===f||f.insertBefore(l,d)}else{var v={emit:function(){}};"object"===o(window.fanship)?window.fanship.events=v:window.fanship={events:v}}},5:function(e,t,n){"use strict";t.__esModule=!0}});
</script>

下記は、head内に導入した例です。

 から  までが該当のscriptタグです。

例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- FANSHIP_EVENT_TRACKER START -->
  <script type="text/javascript">
  /** FANSHIP EVENT TRACKER v3 */
  !function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}({4:function(e,t,n){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var r,i,u,c,s,f;if(t.__esModule=!0,n(5),(null===(r=window.PopinfoWebInterface)||void 0===r?void 0:r.trackEvent)||(null===(c=null===(u=null===(i=window.webkit)||void 0===i?void 0:i.messageHandlers)||void 0===u?void 0:u.popinfo)||void 0===c?void 0:c.postMessage)){var p=window.document.location.hash.split("&").map((function(e){return e.split("=")})).reduce((function(e,t){var n=t[0],o=t[1];return e[n.replace("#","")]=o,e}),{}),a=window.document.cookie.split(";").map((function(e){return e.trim().split("=")})).reduce((function(e,t){var n=t[0],o=t[1];return e[n]=o,e}),{}),l=window.document.createElement("script");l.async=!0,(null===(s=window.PopinfoWebInterface)||void 0===s?void 0:s.getEnvInfo)?l.src="https://sdk.fanship.jp/web/event-tracker/3/fanship-event-tracker.js":a["JP.FANSHIP.POPINFO_ID"]&&a["JP.FANSHIP.APPLI_ID"]&&a["JP.FANSHIP.DEVICE_TYPE"]&&a["JP.FANSHIP.P_MODEL"]&&a["JP.FANSHIP.P_OS_VER"]||p.popinfoId&&p.appliId&&p.deviceType&&p.pModel&&p.pOsVer?l.src="https://sdk.fanship.jp/web/event-tracker/2/fanship-event-tracker.js":l.src="https://sdk.fanship.jp/web/event-tracker/3/fanship-event-tracker.js";var d=window.document.getElementsByTagName("script")[0];null===(f=d.parentNode)||void 0===f||f.insertBefore(l,d)}else{var v={emit:function(){}};"object"===o(window.fanship)?window.fanship.events=v:window.fanship={events:v}}},5:function(e,t,n){"use strict";t.__esModule=!0}});
  </script>
  <!-- FANSHIP_EVENT_TRACKER END -->

</head>
<body>
</body>
</html>

2. iOSアプリへの組み込み

手順

1 . 下記 PopinfoWebkitUtil を定義した 2ファイルをプロジェクトに追加します。

2 . ViewController へ WKScriptMessageHandler を追加します。

class ViewController:  ..., WKScriptMessageHandler {
    // ... 省略 ...
}

3 . WebView の userContentController に、前述の WKScriptMessageHandler を実装したクラスを追加します。

URLを読み込む前に、下記を実装してください。

self.webView.configuration.userContentController.add(viewController, name: "popinfo")

※ self に webView を保持する場合、循環参照によるメモリリーク対策のため、画面を閉じる等の適切なタイミングで removeScriptMessageHandler もセットで実装することを推奨します。

// URL読み込み前に実装
self.webView.configuration.userContentController.add(self, name: "popinfo")

// 画面を閉じる等の適切なタイミングで実装
self.webView.configuration.userContentController.removeScriptMessageHandler(forName: "popinfo")

4 . WKScriptMessageHandler を実装したクラスに WKScriptMessage を受け取るためのデリゲートを追記し、その中で PopinfoWebkitUtil.receiveJavaScriptMessage() をコールします。

 class ViewController:  ..., WKScriptMessageHandler {
    // ... 省略 ...
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        PopinfoWebkitUtil.receiveJavaScriptMessage(message)
    }
    // ... 省略 ...
}

3. Androidアプリへの組み込み

手順

１ . PopinfoWebInterface.java ファイルをプロジェクトに追加してください。

PopinfoWebInterface.java

２ . JavaScript からのイベント付与対象の WebView で addJavascriptInterface を呼び出し、 PopinfoWebInterface を追加してください。

webView.addJavascriptInterface(new PopinfoWebInterface(webView), PopinfoWebInterface.TAG);

組み込み確認方法

WebViewに正しく組み込めているかどうか確認する際は、HEADタグ内に下記を組み込んでください。

<script>
window.addEventListener('load', function () {
  var p = document.createElement('p');
  p.style.fontSize = '24px';
  if (window.fanship && window.fanship.events && window.fanship.events.constructor.name !== 'Object') {
    p.innerText = '組み込み成功';
    p.style.color = 'green';
  } else {
    p.innerText = '組み込み失敗';
    p.style.color = 'red';
  }
  window.document.body.prepend(p);
});
</script>

WebView内で正しく組み込まれている場合は、ページ上部に緑色で「組み込み成功」と表示されます。

組み込みに失敗した場合は、ページ上部に赤色で「組み込み失敗」と表示されます。

※ このコードは開発時の動作確認用コードなので、本番環境では使用しないでください。