WebApp Integration

This feature is supported in React Native SDK version 3.28.0 and above, and Javascript SDK version 11.51.0 and above.

For information about WebApp, refer to the documentation.

Already integrating a WebApp?

If you are currently using the WebApp integration method that requires modifying both React Native and Javascript code, refer to the migration guide to migrate to the new WebApp integration method.

When rendering your own website through WebView, you can use the settings below to use the Hackle JavaScript SDK included in the website identically to the Hackle React Native SDK functions without modifying the website code.

When WebApp Integration is configured, all events that occur within the WebView are collected through the React Native SDK.

The following steps are required for React Native WebApp Integration.

1. Complete the React Native SDK Integration.

2. Add @hackler/react-native-webview-plugin to your project.

3. Add the bridge when rendering WebView in React Native.

1. Add Plugin

If you are using React Native 0.81 or later, use plugin version 1.1.1 or later.

npm

npm install --save @hackler/react-native-webview-plugin

yarn

iOS

cd ios
pod install

2. Inject WebView Bridge

Add HackleWebViewConfig to the nativeConfig props of the react native webview.

You can create a config using the createHackleWebViewConfig() function.

import { WebView } from 'react-native-webview';
import { createInstance, HackleProvider } from "@hackler/react-native-sdk";
import { createHackleWebViewConfig } from '@hackler/react-native-webview-plugin';

// 웹앱 브릿지 주입 전 반드시 핵클 SDK 초기화가 완료되어야 합니다.
const hackleClient = createInstance("YOUR_SDK_KEY");

function MyWebView() {
  const config = createHackleWebViewConfig();

  return (
    <HackleProvider hackleClient={hackleClient}>
      <WebView
          nativeConfig={hackleConfig}
          source={{ uri: currentUrl }}
      />
    </HackleProvider>
  );
}

Integrating Auto-collected Events from WebView

The $page_view and $engagement that occur in the website inside the WebView are disabled by default. You can enable each auto-collected event by configuring HackleWebViewConfig when setting up the WebView bridge.

import { WebView } from 'react-native-webview';
import { createInstance, HackleProvider } from "@hackler/react-native-sdk";
import { createHackleWebViewConfig } from '@hackler/react-native-webview-plugin';

// 웹앱 브릿지 주입 전 반드시 핵클 SDK 초기화가 완료되어야 합니다.
const hackleClient = createInstance("YOUR_SDK_KEY");

function MyWebView() {
  const hackleConfig = createHackleWebViewConfig({
    automaticScreenTracking: true,
    automaticEngagementTracking: true,
    automaticRouteTracking: true,
  });

  return (
    <HackleProvider hackleClient={hackleClient}>
      <WebView
          nativeConfig={hackleConfig}
          source={{ uri: currentUrl }}
      />
    </HackleProvider>
  );
}

Configuration Options

Option	Description	Default	Supported Bridge Version
automaticScreenTracking	Whether to collect $page_view from the website	false	1.0.0 +
automaticEngagementTracking	Whether to collect $engagement from the website	false	1.0.0 +
automaticRouteTracking	Whether to automatically collect page information from the website	true	1.1.0 +

To automatically collect $page_view and $engagement on page navigation, set automaticScreenTracking, automaticEngagementTracking, and automaticRouteTracking all to true.

When manually collecting $page_view and $engagement on page navigation, set automaticScreenTracking and automaticEngagementTracking to true, and set automaticRouteTracking to false.