FANSHIP WebView版イベントトラッキング機能 組み込みガイド

WebView内からfanshipにイベントを送信することができる機能です。

何ができるのか

デフォルトプロパティ

イベント送信時に、共通で送るパラメータです。標準で以下を送りますが、追加することもできます。

キー名 例 説明
scheme https URLのスキーマが入ります。(://は含めない)
authority docs.fanship.jp URLのホスト名またはIPアドレスとポート番号 が入ります。
path /ja/dev/web/tracking.html ドメイン以降からクエリパラメータまでの文字列が入ります。(ルートの場合は/を送る)
query q=tracking クエリパラメータが入ります。(? は含まない)
fragment id URLのフラグメントが入ります。
referrer https://google.com 遷移元URLが入ります。
title FANSIHPサポート ページのタイトルが入ります。
canonicalUrl https://support.fanship.jp/hc/ja rel属性の値に"canonical" のlink要素が存在する場合、そのlink要素のhref属性値が入ります。
ogUrl https://support.fanship.jp/hc/ja property属性の値が"og:url"のmeta要素が存在する場合、そのmeta要素のcontent属性値が入ります。
pModel iPhone11,2 アプリから連携された端末名が入ります。
pOsVer 9.1 アプリから連携されたOSバージョンが入ります。
eventTrackerVer 2.0.0 モジュールのバージョンが入ります。

サポート対象

※ PC/SP版ブラウザは現在サポートしていません。 ※ Android5は動作する事のみ確認しています。（初回に限り）

導入方法

下記の3ステップでWebトラッキングの組み込みをすることができます。

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

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

<script type="text/javascript">
/** FANSHIP EVENT TRACKER v2 */
!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=10)}({10: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,l,f=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}),{}),p=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}),{});if((p["JP.FANSHIP.POPINFO_ID"]&&p["JP.FANSHIP.APPLI_ID"]&&p["JP.FANSHIP.DEVICE_TYPE"]&&p["JP.FANSHIP.P_MODEL"]&&p["JP.FANSHIP.P_OS_VER"]||f.popinfoId&&f.appliId&&f.deviceType&&f.pModel&&f.pOsVer)&&((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 a=window.document.createElement("script");a.async=!0,a.src="https://sdk.fanship.jp/web/event-tracker/2/fanship-event-tracker.js";var d=window.document.getElementsByTagName("script")[0];null===(l=d.parentNode)||void 0===l||l.insertBefore(a,d)}else{var s=function(){},v={set:s,emit:s,init:s};"object"===o(window.fanship)?window.fanship.events=v:window.fanship={events:v}}}});
</script>

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

<!-- FANSHIP_EVENT_TRACKER START --> から <!-- FANSHIP_EVENT_TRACKER END --> までが該当の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 v2 */
  !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=10)}({10: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,l,f=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}),{}),p=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}),{});if((p["JP.FANSHIP.POPINFO_ID"]&&p["JP.FANSHIP.APPLI_ID"]&&p["JP.FANSHIP.DEVICE_TYPE"]&&p["JP.FANSHIP.P_MODEL"]&&p["JP.FANSHIP.P_OS_VER"]||f.popinfoId&&f.appliId&&f.deviceType&&f.pModel&&f.pOsVer)&&((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 a=window.document.createElement("script");a.async=!0,a.src="https://sdk.fanship.jp/web/event-tracker/2/fanship-event-tracker.js";var d=window.document.getElementsByTagName("script")[0];null===(l=d.parentNode)||void 0===l||l.insertBefore(a,d)}else{var s=function(){},v={set:s,emit:s,init:s};"object"===o(window.fanship)?window.fanship.events=v:window.fanship={events:v}}}});
  </script>
  <!-- FANSHIP_EVENT_TRACKER END -->

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

2. iOSへの組み込み

各機能連携手順

共通の手順

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

get_appPopinfoWebkitUtil.h

get_appPopinfoWebkitUtil.m

fragment付与

appendEnvironmentInfoToUrl メソッドをコールすると、戻り値として「各種情報をフラグメントに付与したURL」が取得できますので、WebView で 読み込む URL として使用します。 ※URL へのフラグメントの付与は毎回行う必要はなく、最初に URL を読み込む際のみで大丈夫です

// Swift における実装の例
let targetUrl = PopinfoWebkitUtil.appendEnvironmentInfo(toUrl: "<対象のURL>")!
let urlReqForTestSite = URLRequest(url: URL(string: targetUrl)!)
self.webView.load(urlReqForTestSite)
popinfoID取得スキーマのサポート

WKNavigationDelegate を実装した任意のクラスにおいて webView:decidePolicyForNavigationAction:decisionHandler: を実装し、 -[PopinfoWebkitUtil executeJavaScriptPopinfoId:webView:] をコールして、JavaScriptにIDを付与する分岐処理を追加します。

class ViewController: ..., WKNavigationDelegate {
    // ... 省略 ...
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        if PopinfoWebkitUtil.evaluateJavaScript(in: navigationAction.request, webView: webView) {
            decisionHandler(.cancel)
            return
        }
        // ... 省略 ...
    }
    // ... 省略 ...
}

JavaScript からのイベント付与

１. 対象の ViewController へ WKScriptMessageHandler を追加してください。

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

２. 対象の WebView の userContentController へ WKScriptMessageHandler を実装したクラスを追加をしてください。

// viewDidLoad などに追記
// このコードでは省略していますが、実装時は強参照による循環参照にご注意ください
self.webView.configuration.userContentController.add(self, name: "popinfo")

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

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

3. Androidへの組み込み

各機能連携手順

共通の手順

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

get_app PopinfoWebUtil.java

get_app PopinfoWebInterface.java

fragment付与

WebView で URL を読み込む際、getHashUrl メソッドを呼び、取得した URL を読み込んでください。 ※URL へのフラグメントの付与は毎回行う必要はなく、最初に URL を読み込む際のみで大丈夫です

String url = PopinfoWebUtil.getHashUrl(context, <対象のURL>, <アプリケーションID>);
webView.loadUrl(url);
popinfoID取得スキーマのサポート

WebViewClient の shouldOverrideUrlLoading で doPopinfoIdScript を呼び出してください。

webview.getSettings().setJavaScriptEnabled(true);
webview.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return PopinfoWebUtil.doPopinfoIdScript(view, url);
    }
}
JavaScript からのイベント付与

対象の WebView で addJavascriptInterface を呼び出し、 PopinfoWebInterface を追加してください。

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

組み込み確認方法

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

<script>
window.addEventListener('load', function() {
    window.document.body.innerHTML = (fanship.events.emit !== fanship.events.set ?
          '<p style="color: green; font=size: 24px;">組み込み成功</p>' :
          '<p style="color: red; font=size: 24px;">組み込み失敗</p>')
        + window.document.body.innerHTML;
});
</script>

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

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

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

一歩進んだ使い方

全てのイベントに共通のプロパティを設定する

会員IDなど、全てのイベントに付与したいプロパティを設定できます。

setメソッドを使って、イベント送信前にプロパティの設定を行うことができます。

// 通常、load イベント発生後に処理をしないと、fanship 変数が初期化されていません。
window.addEventListener('load', function() {
    fanship.events.set({
      itemId: '10000',
    });
});

独自のイベントを送信する

ボタンを押したタイミングなどでアプリケーション独自のイベントを送信することができます。

emitメソッドを使って、イベントを送信します。

// 通常、load イベント発生後に処理をしないと、fanship 変数が初期化されていません。
window.addEventListener('load', function() {
    // イベント名のみ送信する場合
    fanship.events.emit('shop.addCart');

    // プロパティやコールバック関数の組込例
    fanship.events.emit('shop.addCart', {
        itemId: '100',
   }, function (err) {
        if (err !== null) {
            console.log(err);
       }
    });
});

イベント名、プロパティ、コールバック関数を指定できます。

FAQ

アプリとWebViewはどのように連携されますか?

URLのフラグメントを使ってアプリからWebViewに連携情報を渡すことでWebトラッキングが開始されます。

WebViewを最初に開いたときに1度Fragmentの付与を行えば、下記の条件を満たせばページ遷移後も引き続きWebトラッキング機能を利用できます。