# 웹앱 연동

{% hint style="info" %}
React Native SDK 3.28.0 버전 이상, Javascript SDK 11.51.0 버전 이상에서 지원하는 기능입니다.
{% endhint %}

{% hint style="info" %}
웹앱에 대해서는 [문서](/development-guide/react-native/webapp-integration/react-native-web-app-intergration-deprecated.md)를 참고해주세요.
{% endhint %}

{% hint style="warning" %}
이미 웹앱 연동중이셨나요?

React Native와 Javascript 코드를 모두 수정하는 웹앱 연동방식을 사용중이셨으면 [마이그레이션 가이드](/development-guide/react-native/webapp-integration/react-native-web-app-plugin-migration.md)를 참고해서 새로운 웹앱 연동 방식으로 연동해주세요.
{% endhint %}

`WebView`를 통해 자사 웹사이트를 랜더링하는 경우, 아래 설정을 통해 웹사이트에 포함된 핵클 JavaScript SDK를 웹사이트 코드 변경없이 핵클 React Native SDK 기능과 동일하게 사용할 수 있습니다.

웹앱 연동을 한 경우 웹뷰 내에서 발생하는 모든 이벤트는 React Native SDK를 통해 수집됩니다.

React Native 웹앱 연동을 위해서 아래의 작업이 필요합니다.

1. [React Native SDK 연동](/development-guide/react-native.md)을 완료합니다.
2. `@hackler/react-native-webview-plugin`을 프로젝트에 추가합니다.
3. React Native에서 WebView를 렌더링하는 시점에 브릿지를 추가합니다.

## 1. 플러그인 추가

{% hint style="warning" %}
React Native 0.81 이상 버전을 사용하는 경우 플러그인 1.1.1 이상 버전을 사용하세요.
{% endhint %}

[![](https://img.shields.io/npm/v/%40hackler%2Freact-native-webview-plugin)](https://www.npmjs.com/package/@hackler/react-native-webview-plugin)

{% tabs %}
{% tab title="npm" %}

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

{% endtab %}

{% tab title="yarn" %}

```javascript
yarn add @hackler/react-native-webview-plugin
```

{% endtab %}
{% endtabs %}

#### iOS

```shell
cd ios
pod install
```

## 2. WebView 브릿지 주입

react native webview의 `nativeConfig` props에 HackleWebViewConfig를 추가해주세요.

`createHackleWebViewConfig()` 함수를 이용하여 config 를 생성할 수 있습니다.

```typescript
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>
  );
}
```

#### 웹뷰에서 발생하는 자동 수집 이벤트 연동

웹뷰 내 웹사이트에서 발생하는 `$page_view`와 `$engagement`는 비활성화 상태입니다. 웹뷰 브릿지를 설정할 때 `HackleWebViewConfig`를 설정하여 자동 수집 이벤트를 각각 활성화할 수 있습니다.

```typescript
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>
  );
}
```

#### 설정 옵션

<table data-full-width="false"><thead><tr><th width="213.57">설정</th><th width="295.49">기능</th><th width="125.81">기본값</th><th width="108.1">지원 브릿지 버전</th></tr></thead><tbody><tr><td><code>automaticScreenTracking</code></td><td>웹사이트에서 발생하는 <code>$page_view</code> 수집 여부</td><td><code>false</code></td><td>1.0.0 +</td></tr><tr><td><code>automaticEngagementTracking</code></td><td>웹사이트에서 발생하는 <code>$engagement</code> 수집 여부</td><td><code>false</code></td><td>1.0.0 +</td></tr><tr><td><code>automaticRouteTracking</code></td><td>웹사이트에서 발생하는 페이지 정보 자동 수집 여부</td><td><code>true</code></td><td>1.1.0 +</td></tr></tbody></table>

{% hint style="info" %}
웹페이지 이동 시 `$page_view`와 `$engagement` 를 자동 수집하려면 `automaticScreenTracking`, `automaticEngagementTracking`, `automaticRouteTracking` 를 모두 `true`로 설정하세요.

웹페이지 이동 시 `$page_view`와 `$engagement` 를 [수동 수집](/development-guide/javascript/event-tracking/js-track-page.md)하는 경우 `automaticScreenTracking`, `automaticEngagementTracking`는 `true`로 설정하고, `automaticRouteTracking` 를 `false`로 설정하세요.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hackle.io/development-guide/react-native/webapp-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.