이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Firebase용 Google 애널리틱스로 WebView에서 이벤트 추적

1. 소개

최종 업데이트: 2022년 2월 25일

빌드할 항목

이 Codelab에서는 GA4F에서 이벤트를 추적할 수 있도록 WebView 내의 웹페이지에서 네이티브 코드로 이벤트를 전달하는 방법을 알아봅니다.

WebView를 사용하여 웹페이지를 호출하는 샘플 하이브리드 Android 앱을 사용합니다.

학습할 내용

하이브리드 앱에서 GA4F (Firebase용 Google 애널리틱스)를 초기화하는 방법
웹페이지에서 맞춤 이벤트 및 매개변수를 만드는 방법
WebView 내에서 웹페이지의 이벤트를 네이티브 코드로 전달하는 방법
디버깅 방법
이벤트를 가져와서 액션 캠페인에 사용하는 방법

필요한 항목

Android 스튜디오 3.6 이상
Firebase 계정

2. 설정

코드 가져오기

Firebase 공식 가이드에서는 GitHub의 샘플 코드를 제공합니다. 이 프로젝트에 필요합니다.

시작하려면 코드를 다운로드하고 원하는 개발 환경에서 열어야 합니다. 여기서는 android와 web이라는 두 가지 디렉터리를 사용합니다. 'Android' 디렉터리는 Android 앱과 '웹'용 디렉터리는 앱에서 WebView를 통해 호출할 웹페이지를 위한 것입니다.

3. Firebase 프로젝트 만들기 및 설정

Firebase를 시작하려면 Firebase 프로젝트를 만들고 설정해야 합니다.

Firebase 프로젝트 만들기

Firebase에 로그인합니다.

Firebase Console에서 프로젝트 추가 (또는 프로젝트 만들기)를 클릭하고 Firebase 프로젝트의 이름을 Webview-test-codelab 또는 원하는 이름으로 지정합니다.

프로젝트 만들기 옵션을 클릭하며 살펴봅니다. 즉, 메시지가 표시되면 Firebase 약관에 동의합니다. 그리고 작업 이벤트를 추적하고 전환을 분석하기 위해 Google 애널리틱스 이벤트가 필요하므로 이 프로젝트에서 Google 애널리틱스를 사용 설정해야 합니다.

Firebase 프로젝트에 관해 자세히 알아보려면 Firebase 프로젝트 이해를 참고하세요.

4. Android용 Firebase 구성

Firebase Console에서 Android 구성

Firebase Console 홈에서 아래와 같이 Android 아이콘을 클릭하면 됩니다.

또는 왼쪽 탐색 메뉴에서 프로젝트 개요로 이동하고 '앱에 Firebase를 추가하여 시작하기'에서 Android 버튼을 클릭합니다.

그러면 'Android 앱에 Firebase 추가'가 표시됩니다. 볼 수 있습니다.

앱 디렉터리의 android/app/src/main/AndroidManifest.xml에서 Android 패키지 이름 (예: com.xxxx.myproject)을 찾을 수 있습니다.

package="com.xxxx.myproject"

여기에는 SHA-1 키가 필요하지 않습니다. 이 키는 Google 로그인 또는 Firebase 동적 링크를 사용하거나 이 Codelab에서 다루지 않는 Google Play에서 in_app_purchase 데이터를 가져오려는 경우에만 필요합니다.
앱 등록을 클릭합니다.
Firebase Console에서 google-services.json 구성 파일을 다운로드하고 다음을 복사합니다. 이 파일을 앱 프로젝트의 android/app 디렉터리에 붙여넣습니다.
다시 Firebase Console에서 나머지 단계를 건너뛰고 Firebase Console의 기본 페이지로 돌아갑니다.
마지막으로 Firebase에서 생성된 google-services.json 파일을 읽으려면 Google 서비스 Gradle 플러그인이 필요합니다.
IDE 또는 편집기에서 android/app/build.gradle을 연 후 다음 코드 줄을 파일의 마지막 줄로 추가합니다.

apply plugin: 'com.google.gms.google-services'

android/build.gradle를 엽니다. 그런 다음 buildscript 태그 내에 새 종속 항목을 추가합니다.

buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}

앱이 여전히 실행 중인 경우 앱을 닫았다가 다시 빌드하여 Gradle이 종속 항목을 설치할 수 있도록 합니다.

Android용 앱 구성을 완료했습니다.

5. 웹에서 애널리틱스 웹 인터페이스를 개발하고 맞춤 이벤트 기록하기

Google 애널리틱스를 사용하여 WebView에서 이벤트를 추적하려면 웹과 Android 앱 모두에 코드를 삽입해야 합니다.

여기서는 웹페이지에 입력해야 하는 코드를 살펴보겠습니다.

먼저 HTML 파일에서 사용할 JavaScript 파일을 만듭니다. 샘플 코드에서 js 파일의 이름은 index.js로 지정됩니다. 'logEvent' 함수를 만들어야 합니다. 'AnayticsWebInterface' 호출을 'messageHander' 확인할 수 있습니다

그리고 아래와 같이 html 파일에서 이벤트를 추적하려는 위치에서 이 함수를 호출합니다.

Android 앱의 WebView에서 이벤트가 트리거되는 경우 'window.AnalyticsWebInterface' 가 호출되고 이벤트를 앱의 WebInterface 코드로 전달합니다.

6. 웹페이지 URL을 가져올 호스트 웹 디렉터리

앱의 WebView 내에서 웹페이지를 호출하려면 웹페이지 URL이 필요합니다. 웹페이지를 호스팅하는 방법은 다양합니다. 이 Codelab에서는 편의를 위해 Firebase 호스팅 서비스를 사용합니다.

터미널에서 웹 디렉터리 (예: cd web)하고 다음 명령어를 실행합니다.
npm install -g firebase-tools

Firebase CLI가 설치됩니다

firebase login
firebase init
'호스팅'을 선택합니다. 설정할 기능을 묻는 메시지가 표시되면
Android 앱에 설정한 프로젝트를 선택합니다.
나머지 모든 프롬프트는 기본값을 수락합니다.
firebase deploy --only hosting - Firebase 호스팅에 배포합니다.

웹페이지 URL을 가져온 후 Android 스튜디오의 앱 프로젝트로 이동하여 아래와 같이 이 단계에서 방금 만든 웹 URL을 WebView 내에 삽입합니다.

7. Android 앱에서 인터페이스 코드 개발

GA4F를 사용하여 WebView에서 이벤트를 추적하려면 웹과 Android 모두에 코드를 삽입해야 합니다. 여기서는 WebView의 웹페이지에서 이벤트를 수신하려면 Android 앱에 어떤 코드를 입력해야 하는지 살펴보겠습니다.

'AnalyticsWebInterface.java'를 만듭니다. 파일을 만들어 'AnalyticsWebInterface'를 만듭니다. 클래스에 대해 자세히 알아보세요. 이 클래스에서 아래와 같이 @JavascriptInterface를 코딩하여 웹 js 파일의 logEvent 함수를 연결해야 합니다.

다음으로, 아래와 같이 WebView를 호출하는 JavaScript 인터페이스를 활동에 추가해야 합니다.

전체 코드를 보려면 GitHub의 '설정하기' 단계를 거칩니다.

8. 이벤트 확인 및 디버깅

이벤트 디버깅의 경우, 테스트 기기를 연결하거나 에뮬레이터를 실행한 후 Android 스튜디오 터미널에서 다음 코드를 사용하면 됩니다.

> adb shell setprop debug.firebase.analytics.app [앱 패키지 이름]

> adb shell setprop log.tag.FA VERBOSE

> adb 셸 setprop log.tag.FA-SVC 상세 표시

> adb logcat -v 시간 -s FA FA-SVC

'이벤트 1 기록'을 클릭합니다. 코드가 잘 작동하면 다음과 같은 로그가 표시됩니다.

Firebase Console에서 확인하려면 실시간 탭을 사용해도 됩니다. Firebase Console로 이동하여 아래와 같이 실시간 탭을 클릭합니다.

그런 다음 '비교 추가'를 사용하여 Android 플랫폼 이벤트를 필터링합니다. 함수를 사용하세요.

코드가 올바르게 구현되면 실시간 탭에서 Android 앱의 이벤트를 확인할 수 있습니다.

몇 시간 후에 Firebase Console의 이벤트 탭에서 로깅된 이벤트를 확인할 수 있습니다. Firebase 콘솔에 있는 애널리틱스 섹션에서 이벤트 탭을 클릭하기만 하면 됩니다. 이벤트를 클릭하기만 하면 event1 이벤트 내의 값을 확인할 수도 있습니다.

event1을(를) Google Ads에서 전환으로 가져오려면 전환으로 표시 스위치를 오른쪽으로 슬라이드하여 전환으로 표시하세요.

이벤트가 전환 탭에 있으면 이벤트가 전환으로 표시된 것입니다. 이제 Google Ads가 Firebase에서 이 이벤트를 가져올 수 있습니다.

디버깅 용도로는 Firebase DebugView를 사용하세요. 자세한 내용은 디버깅 이벤트를 참고하세요.

9. Google Ads에서 애널리틱스 이벤트 가져오기

Firebase 설정이 완료되면 액션 이벤트로 앱 캠페인을 시작할 수 있습니다. 먼저 Firebase를 Google Ads에 연결합니다. Firebase를 Google Ads에 연결하면 앱 캠페인에서 Firebase 이벤트를 가져올 수 있습니다. 이 프로세스를 통해 Google Ads가 잠재고객에 관해 더 자세히 알 수 있게 됨으로써 앱 캠페인을 촉진할 수 있습니다.