이 글에서는 하이브리드 앱의 웹뷰(WebView) 내에서 발생하는 이벤트를 Firebase Analytics에 연동하여 GTM으로 이벤트 수집하는 방법을 단계별로 설명합니다.
하이브리드 앱 또는 네이이트 앱의 특정 영역에 웹뷰를 사용하는 경우, 사용자들의 행동은 웹뷰 내에 있는 웹사이트에서 일어나게 됩니다. 그런데, 파이어베이스 애널리틱스의 경우엔 네이티브 영역에 설치가 됩니다. 그래서 웹뷰 내에서 일어나는 행동들을 파이어베이스 애널리틱스가 이벤트로 바로 찍을 수가 없습니다.
그래서 웹뷰에서 발생하는 이벤트를 수집하려면, 웹사이트 내에서 사용자가 행동을 했을 때, 네이티브 영역으로 데이터를 전달해줘야합니다. 그리고 나서 데이터를 받은 네이티브 영역에서는 받은 데이터를 이용해서 앱 자체에서 파이베이스 이벤트를 전송하는 방식으로 사용을 하게 됩니다. 실제 화면은 웹 화면이고, 이벤트는 앱에서 찍어야하기 때문에 앱과 웹사이에 통신할 수 있는 뭔가가 필요합니다.
이렇게 웹과 앱 사이에서 통신하여 이벤트를 보내는 방법을 지금부터 설명드리겠습니다. 작업 방법은 파이어베이스 문서를 참고하였습니다.
1. Firebase Analytics 설정
먼저, 네이티브 앱에 Firebase Analytics가 설치되어 있어야 합니다. 이를 통해 네이티브 영역에서 이벤트를 수집할 수 있는 기반을 마련합니다.
2. 웹사이트에 JavaScript 핸들러 추가
웹뷰 내에서 발생하는 사용자 행동을 네이티브 앱으로 전달하기 위해 웹사이트에 JavaScript 핸들러를 추가해야 합니다. 이를 통해 웹사이트에서 발생한 이벤트를 네이티브 앱으로 전달할 수 있습니다. 다음과 같은 JavaScript 핸들러 코드를 웹사이트의 HTML 문서 <body> 부분에 추가합니다.
<script>
function logEvent(name, params) {
if (!name) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.logEvent(name, JSON.stringify(params));
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'logEvent',
name: name,
parameters: params
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
function setUserProperty(name, value) {
if (!name || !value) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.setUserProperty(name, value);
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'setUserProperty',
name: name,
value: value
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
</script>
이 핸들러는 이벤트 이름과 매개변수를 받아, 네이티브 앱으로 전달하는 역할을 합니다. 스크립트를 살펴보면, 함수가 2개 설정되어있는 걸 알 수 있습니다. 구조는 거의 동일 합니다. 이벤트 이름과, 매개변수 값을 받도록 되어있습니다.
이벤트 이름이 없으면 작동하지 않고, 안드로이도, iOS에서는 작동하는 방식이 각각 있습니다. 내용을 보면, 웹뷰와 네이티브에 데이터를 전달줄 수 있는 messageHandlers를 이용해서 데이터를 전달한다고 나와있스니다. 이 함수는 수정할 필요없이 그대로 써도 무방합니다.
그래서 이 함수를 웹뷰 내에서 실행하고자 하는 웹사이트에다가 넣어두고, 필요할 때마다 함수를 이용해서 이벤트 데이터를 네이티브로 전달하고, 사용자 속성 데이터를 필요할 때마다 네이티브에 전달하면 됩니다. 이 함수 코드만 웹사이트에 넣어두고, 나머지는 GTM에서 활용하는 것도 가능합니다. 웹에서 GTM을 설정하는 것과 똑같은 방법으로 설정하면 웹뷰의 이벤트도 자동으로 수집됩니다.
3. 네이티브 앱에서 이벤트 수신 및 Firebase Analytics 연동
2번에서 설명한 함수를 웹사이트에 넣었으면, 네이티브 앱에도 웹뷰에서 받아온 데이터를 앱 내에서 파이어베이스 애널리틱스 이벤트를 실행시키는 코드도 작성되어야합니다. 아래 스크립트 내용을 보면, command가 "setUserProperty" 일 때, 애널리틱스 이벤트를 실행시키겠다는 내용이 나와있고, command가 "logEvent"일 때는 이벤트 수집을 실행시키겠다는 코드가 작성되어있습니다. 이걸 복사해서 집어넣으면 됩니다.
웹사이트에서 전달된 이벤트를 네이티브 앱에서 수신하고, 이를 Firebase Analytics에 연동하기 위해서는 네이티브 앱 코드에 메시지 핸들러를 구현해야 합니다.
iOS (Swift) 예시:
func userContentController(_ userContentController: WKUserContentController,
didReceive message: WKScriptMessage) {
guard let body = message.body as? [String: Any] else { return }
guard let command = body["command"] as? String else { return }
guard let name = body["name"] as? String else { return }
if command == "setUserProperty" {
guard let value = body["value"] as? String else { return }
Analytics.setUserProperty(value, forName: name)
} else if command == "logEvent" {
guard let params = body["parameters"] as? [String: NSObject] else { return }
Analytics.logEvent(name, parameters: params)
}
}
가이드 맨 아래에 보면 메세지 핸들러를 추가하라고 나옵니다. 데이터 받는 걸 이야기 하는 것입니다. 이것도 복사해서 실제로 웹뷰가 실행되는 코드 함수 안에 넣으면 됩니다. 그리고 마지막으로 ViewController라는 클래스에다가 WKScriptMessageHandler를 추가켜야합니다. 여기까지 기본 세팅은 끝났고, 이제 이벤트 설치만 하면 된다.
4. 웹뷰 내 이벤트 실행 코드 작성 & GTM 세팅
위에서 추가한 핸들러를 사용하여 웹사이트 내에서 발생한 특정 이벤트를 네이티브 앱으로 전달할 수 있습니다. 예를 들어, 사용자가 특정 버튼을 클릭했을 때 이를 Firebase Analytics 이벤트로 기록하고 싶다면, 다음과 같이 작성할 수 있습니다. 이렇게 스크립트를 추가할 필요없이 GTM에서 작업을 하는 것도 가능합니다.
<script>
document.querySelector('#id_name').addEventListener('click', function(){
logEvent('event_name', {
'parameter': 'parameter_value'
});
});
</script>
5. 디버깅 및 검증
이벤트가 제대로 기록되고 있는지 확인하기 위해 Firebase Console에서 디버깅을 진행할 수 있습니다. 이를 위해 Firebase Console에서 사용자에게 편집자 권한을 부여하고 실시간 이벤트 흐름을 확인합니다.
위 단계를 통해 웹뷰에서 발생한 사용자 이벤트를 네이티브 앱에서 수집하고 Firebase Analytics에 기록할 수 있습니다. 이 방식은 하이브리드 앱의 특성상 웹과 네이티브 간의 데이터를 원활하게 전달하기 위한 필수적인 절차입니다. 이를 통해 웹뷰 기반의 하이브리드 앱에서도 사용자 행동을 효과적으로 추적하고 분석할 수 있습니다.
참고
'그로스해킹 > GTM, GA4 API' 카테고리의 다른 글
| GA4 API 사용법(2): 구글 시트에 코호트 리텐션 데이터 자동화 (0) | 2024.10.07 |
|---|---|
| Google Analytics용 Python API(GA4) 사용법(1) (1) | 2024.06.09 |
| GA4 데이터로 Carrying Capacity 지표 추적하는 대시보드 만들기 (1) | 2024.03.23 |
| 루커 스튜디오 할당량 체크하는 방법(GA4와 연결했을 때) (0) | 2024.02.16 |
| User ID, 사용자를 식별하는 가장 확실한 방법 (0) | 2024.01.27 |
댓글