# 웹앱 연동

{% hint style="info" %}
iOS SDK 2.27.0 이상, JavaScript SDK 11.25.1 이상 버전에서 지원하는 기능입니다.

웹앱에 대해서는 [문서](/development-guide/faq/web-app-intergration.md)를 참고해주세요.
{% endhint %}

`WKWebView` 를 통해 자사 웹사이트를 랜더링하는 경우, 다음 같은 설정을 통해 웹사이트에 포함된 핵클 JavaScirpt SDK를 웹사이트 코드 변경없이 핵클 iOS SDK 기능과 동일하게 사용할 수 있습니다.

브릿지 설정을 하면 웹뷰에서 발생하는 핵클 이벤트는 iOS SDK를 통해 수집됩니다.

{% hint style="info" %}
웹뷰 브릿지는 Hackle JavaScript SDK에서 브릿지로 전달한 데이터만 후킹하여 처리하고 나머지 데이터는 참조한 delegate로 전달합니다.
{% endhint %}

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

```swift
...
Hackle.app().setWebViewBridge(webView)
...
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
...
self.webView = ...
HackleApp *hackleApp = [Hackle app];
[hackleApp setWebViewBridge:self.webView :NULL];
...
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
해당 기능을 사용하기 위해서는 **JavaScript 웹페이지에서 동일한 App SDK 키를 사용**해야 합니다.

핵클 iOS 웹뷰 설정은 iOS `UIDelegate` 및 `WKUserScript` 등을 이용하여 핵클 JavaScript SDK와 상호작용하게 됩니다. 반드시 `WKWebView::load` 함수 호출 이전에 해당 설정이 완료될 수 있도록 코드를 위치시켜 주세요.
{% endhint %}

이미 사용하고 있는 `UIDelegate`가 있는 경우 다음과 같이 사용하고 있는 `UIDelegate`와 함께 해당 함수로 전달해 주세요.

* `UIDelegate`를 설정하지 않은 경우 웹뷰 객체의 `UIDelegate`가 있으면 해당 delegate를 참조합니다.
* `UIDelegate`를 설정한 경우 해당 delegate를 참조합니다.

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

```swift
...
Hackle.app().setWebViewBridge(webView, myUiDelegate)
...
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
...
self.webView = ...
self.myUIDelegate = ...
HackleApp *hackleApp = [Hackle app];
[hackleApp setWebViewBridge:self.webView :self.myUIDelegate];
...
```

{% endtab %}
{% endtabs %}

{% hint style="danger" %}
앱에서 이미 delegate에 다양한 기능을 추가해서 사용하는 경우 delegate 설정이 모두 완료된 후 `setWebViewBridge`함수 호출을 권장합니다.
{% endhint %}

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

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

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

```swift
let webViewConfig = HackleWebViewConfigBuilder()
	.automaticScreenTracking(true)
	.automaticEngagementTracking(true)
	.build()

Hackle.app().setWebViewBridge(webView, myUiDelegate, webViewConfig)
```

#### 설정 옵션

<table><thead><tr><th width="258.32421875">Option</th><th width="120">Default</th><th>Description</th></tr></thead><tbody><tr><td><code>automaticScreenTracking</code></td><td>false</td><td>웹사이트에서 발생하는 <code>$page_view</code> 수집 여부</td></tr><tr><td><code>automaticEngagementTracking</code></td><td>false</td><td>웹사이트에서 발생하는 <code>$engagement</code> 수집 여부</td></tr><tr><td><code>automaticRouteTracking</code></td><td>true</td><td>웹사이트에서 발생하는 페이지 정보 자동 수집 여부</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/ios/ios-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.