メインコンテンツまでスキップ

モバイルアプリ内のウェブページ

Roktは、パートナーがRoktテクノロジーをウェブサイトやモバイルアプリケーションに統合できるさまざまなSDK統合ソリューションを提供しています。これには、ブラウザベースの統合のためのRokt Web SDK、ネイティブモバイル統合のためのRokt iOS SDKおよびRokt Android SDKが含まれます。ただし、ブラウザとモバイルの技術を組み合わせる場合、特別な考慮が必要です。

モバイルアプリ内でウェブページがレンダリングされる場合、Web SDKは主要な統合ポイントのままです。このシナリオでは、Web SDKはモバイルやデスクトップのブラウザ環境と同様に、ウェブページ上に適切なRoktプレースメントとオファーをレンダリングします。ただし、モバイルアプリ環境でトラフィックリンクがどのように開かれるかについては、統合内で特別な考慮が必要です。これにより、最適なユーザーエクスペリエンスが確保されます。

Rokt WebView SDKは、iOSおよびAndroidの一般的なWebView技術に対する小さな拡張機能であり、Web SDKと連携して、Roktプレースメントからのすべてのトラフィックリンクがデバイスのデフォルトブラウザで正常に開かれるようにします。これにより、顧客の予想されるナビゲーションフローが妨げられることなく、アプリ内でシームレスな顧客フローが実現されます。WebView SDKはトラフィックリンクの開き方の動作のみを調整し、ホストアプリケーションやウェブサイトの他の側面の動作には影響を与えません。これにより、オファーに同意した後にリンクを正常に開くことができる顧客のフローが確保されます。

Rokt WebView SDKはどのように機能しますか？​

WebView SDKは、ブラウザのユーザーエージェントを変更することにより、Roktがモバイルアプリ内のウェブページで配置がレンダリングされたことを識別できるようにします。その後、Roktはリンクの開き方を変更し、トラフィックリンクをデバイスのデフォルトブラウザで開くようにします。

Rokt WebView SDKは、Roktの主要な統合ではなく、既にモバイルアプリ内で使用されているWebViewテクノロジーへの小さなアップデートです。Rokt Web SDKはRoktとの主要な統合であり、Rokt WebView SDKはアプリ内から適切にトラフィックリンクを開くことを保証します。

WebView SDKは、以下の技術を使用しているモバイルアプリに実装することができます：

  • iOSのWKWebView
  • AndroidのWebView

Androidアプリケーション​

この手順では、Android WebViewをRokt WebViewで置き換えることを前提としています。具体的なアプローチは、WebViewがプログラムで初期化されているかどうかによって異なります。

バージョン​

システムバージョン
Rokt WebViewSDK1.0.0
Android バージョン/API レベル4.3+ (API レベル 18)
パッケージマネージャーMaven / Gradle
  1. プロジェクトの build.gradle ファイルのリポジトリのリストにJitPackのメイヴンリポジトリを追加します。
 // file => build.gradle (Project: ....)

allprojects {
    repositories {
        google()
        maven { url "https://jitpack.io" }
    }
}

  1. Rokt WebView SDKを追加します。

    アプリのモジュールの build.gradle ファイルを開き、roktwebviewsdk ライブラリを依存関係セクションに追加します。なお、x.x.x は最新のRokt WebView SDKに置き換える必要があります。

dependencies {
   ``` implementation 'com.github.ROKT:rokt-webview-sdk-android:x.x.x' ```
}

  1. レイアウトにRokt WebView SDKを追加します。

    レイアウトファイルで、webView の参照を roktWebView に置き換えます。

    置き換える:

<?xml version="1.0" encoding="utf-8"?>
  <WebView
      android:id="@+id/webView"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

次のように置き換えます:

<?xml version="1.0" encoding="utf-8"?>
  <com.rokt.roktwebviewsdk.RoktWebView
      android:id="@+id/webView"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

または、WebView SDKを onCreate() 内でプログラムで追加することもできます。例えば:

WebView myWebView = new RoktWebView(activityContext);
setContentView(myWebView);
  1. ウェブページを読み込む

roktWebView でウェブページを読み込むには、loadUrl() を使用します。

WebView myWebView = (RoktWebView) findViewById(R.id.webview);
myWebView.loadUrl("https://www.rokt.com");

iOSアプリケーション​

以下の手順は、iOSのWKWebViewをRokt WebViewで置き換える場合を想定しています。具体的なアプローチは、WebViewがプログラムで初期化されているかどうかによって異なります。

バージョン​

システムバージョン
Rokt WebViewSDK2.0.0
iOS14.0+
パッケージマネージャーCocoaPods
  1. RoktWebViewSDKポッドをポッドファイルに追加します。
use_frameworks!
pod 'RoktWebViewSDK'

  1. レイアウトにRokt WebView SDKを追加します。

    Storyboardで、WKWebViewをRoktWKWebViewのカスタムクラスで置き換えます。

CustomClass

または、Rokt WebView SDKをコードでプログラム的に追加することもできます。例えば：

import RoktWebViewSDK
...
var roktWKWebView = RoktWKWebView(frame: self.view.frame)
  1. ウェブページを読み込む。

RoktWKWebViewでウェブページを読み込むには、Swiftではload()を、Objective-CではloadRequest()を使用します。

roktWKWebView.load(URLRequest(url: URL(string: "https://www.rokt.com")!))

付録​

Rokt WebViewSDK for iOSはCocoaPodsを使用して展開されます。CocoaPodsはiOSの依存関係管理ツールであり、SwiftとObjective-Cをサポートしています。ステップバイステップのガイドでは、CocoaPodについて理解しており、iOS開発のためのPodのインストール方法を知っていることを前提としています。もし知らない場合は、CocoaPodのドキュメントを参照してください。ワークスペースをセットアップするためには、このtutorialに従うことができます。

セキュリティとパフォーマンス​

iOSおよびAndroid向けのSDKは、どちらも非常にシンプルで軽量です。これにより、アプリケーション全体のパフォーマンスへの影響は最小限に抑えられます。また、WebView SDKの唯一の影響はユーザーエージェントの変更であるため、Roktの配置からのリンクの開封動作以外の動作には影響がありません。

疑問や懸念を解消するために、iOSおよびAndroid向けのWebView SDKはオープンソースです。

各SDKの詳細をGitHubで確認できます：

この記事は役に立ちましたか？