![[Repro] [iOS] WebView上のイベントトラッキングをしてみた #repro](https://devio2023-media.developers.io/wp-content/uploads/2016/12/repro-logo.png){kind=logo}
[Repro] [iOS] WebView上のイベントトラッキングをしてみた #repro
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
こんぬづは、お金の使い方が下手すぎて、会う人会う人に「君いつもお金ないね」って言われちゃう田中です！
昨日（12/18(日)）Reproさんの会議室を借りてSwift愛好会グループの面々が集まって自由に開発をする部活みたいな会が開催されたのですが、この記事ではそのときゲリラ開催されたReproのWebViewイベントトラッキングハンズオンの内容を、ドキュメントをもとに解説していきます！
イベントトラッキングしてみた
手順はこちらのドキュメントを元にしています。
この資料のとおり実装して、撮影した動画からイベントトラッキングを確認するとこんな風に見ることができます。
iOS側
Reproのセットアップをする
初期セットアップの詳しい内容はこちらをご参照ください。
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
...
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
Repro.setup("YOUR_APP_TOKEN")
Repro.startRecording()
return true
}
...
}
次のWebViewのセットアップはUIWebViewとWKWebViewそれぞれの方法を紹介します。
WebViewのセットアップ
// UIWebViewによる実装
import UIKit
import Repro
class ViewController: UIViewController {
@IBOutlet weak var webView: UIWebView!
override func viewDidLoad() {
super.viewDidLoad()
Repro.startWebViewTracking(self)
webView.delegate = self
}
}
// WKWebViewによる実装
import UIKit
import Repro
class ViewController: UIViewController {
var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
webView = WKWebView()
Repro.startWebViewTracking(self)
webView.delegate = self
}
}
UIWebViewはInterface Builderでつないだ方法になります。WKWebViewはInterface Builderで扱うことができないので、ソースコードでの実装をする必要があります。
そしてRepro.startWebViewTracking(self)によって、webViewのトラッキングを開始することができます。
Web側
HTMLのheaderでreproのjavascriptライブラリをロードする
<head> ... <script src="//s3-ap-northeast-1.amazonaws.com/cdn.repro.io/js/v2/repro.js" type="text/javascript" charset="utf-8"></script> ... </head>
イベントトラッキングしたい箇所でrepro.track()する
ここではボタンの押下時にイベントをReproに送信するように書いてみます。HTMLにベタ書きですがこんな感じ。
<body>
<button onClick="return tappedButton()">ボタン</button>
<script type="text/javascript">
function tappedButton() {
repro.track("tapped button from webview");
}
</script>
</body>
もはや解説するまでもないほどに簡単！なので、中の人に聞いたできること、できないことも紹介します。
中の人に聞いたできること、できないこと
Reproに対応したWebページならばどれでもトラッキングできる
上記手順に従ってtrackイベントを埋め込んであるページであれば自前で用意したWebページのみならず、よそのWebページもトラッキングできるとのこと。あまりそれをやるメリットは思いつきませんが、「一応できるよ！」という小ネタを教えていただけました。
UIWebView, WKWebViewはどちらもトラッキングできるがSFSafariViewControllerはトラッキングできない
というのもUIWebView, WKWebViewのイベントはDelegateメソッドでハンドリングすることができますが、SFSafariViewControllerのイベントはハンドリングすることができないためトラッキングをすることはできないとのことでした。
まとめ
iOS側
- Reproのセットアップをする
- WebViewをセットアップする
- Repro.startWebViewTracking()する
Web側
- HTMLのheaderでreproのjavascriptライブラリをロードする
- イベントトラッキングしたい箇所でrepro.track()する
簡単に導入できる利点として、Webとモバイルアプリの開発がそれぞれ別の会社で担当している時に起こりがちな「Web側としてなにをやればトラッキング対応を完了できるのかがわかりづらい」という問題を解消しやすいところが挙げられます。離れた位置にいる別のチームと連携して、意図した実装をしてもらうことの難しさ、コミュニケーションコストが想定以上にかかってしまったという経験があるので、ここは嬉しいポイントだと思いました。
