Google 애널리틱스 맞춤 이벤트 및 Flutter로 Google Ads 캠페인 실행

최종 업데이트: 2021년 1월 25일

빌드할 프로그램

이 Codelab에서는 GA4F로 맞춤 이벤트를 구현하고 Google Ads를 통해 Flutter 앱을 위한 액션 캠페인을 실행하는 방법을 알아봅니다.

간단한 카운터 위젯이 있는 기본 Flutter 앱을 사용합니다. 카운터 위젯을 클릭할 가능성이 있는 잠재 사용자에게 앱을 광고합니다.

bdbf1fc3cbf49ac7.png

학습할 내용

  • Flutter에서 GA4F(Firebase용 Google 애널리틱스)를 초기화하는 방법
  • 맞춤 이벤트 및 매개변수를 만드는 방법
  • Firebase에서 Google Ads로 이벤트를 가져오는 방법
  • 맞춤 이벤트로 액션 캠페인 실행

요구사항

  • Android 스튜디오 3.6 이상
  • Xcode(iOS 지원용)
  • Firebase 계정
  • Google Ads 계정

간단한 템플릿 Flutter 앱을 만듭니다. 이 Codelab의 시작 앱을 수정합니다.

Android 스튜디오를 실행합니다.

  1. 열려 있는 프로젝트가 없다면 시작 페이지에서 'Start a new Flutter app'을 선택합니다. 이미 프로젝트가 열려 있다면 'File > New > New Flutter Project'를 선택합니다.
  2. 프로젝트 유형으로 'Flutter Application'을 선택하고 'Next'를 클릭합니다.
  3. Flutter SDK 경로가 SDK의 위치를 지정하는지 확인합니다. (텍스트 필드가 비어 있다면 'Install SDK'를 선택합니다.)
  4. 프로젝트 이름을 입력하고 'Next'를 클릭합니다.
  5. Android 스튜디오에서 추천하는 기본 패키지 이름을 사용하고 'Next'를 클릭합니다.
  6. 'Finish'를 클릭합니다.
  7. Android 스튜디오가 SDK를 설치하고 프로젝트를 만들 때까지 기다립니다.

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

Firebase 프로젝트 만들기

  1. Firebase에 로그인합니다.

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

e9a8e1b1c7c52125.png

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

e58151a081f0628.png

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

3e5b8f1b6ca538c4.png

Android 구성

  1. Firebase Console의 왼쪽 탐색 메뉴에서 '프로젝트 개요'를 선택한 후 '앱에 Firebase를 추가하여 시작하기'에서 Android 버튼을 클릭합니다.

다음 화면과 같은 대화상자가 표시됩니다.

3b7d3b33d81fe8ea.png

  1. 제공해야 할 중요한 값은 다음 단계에 따라 얻을 수 있는 Android 패키지 이름입니다.
  1. Flutter 앱 디렉터리에서 android/app/src/main/AndroidManifest.xml 파일을 엽니다.
  2. manifest 요소에서 package 속성의 문자열 값을 찾습니다. 이 값이 Android 패키지 이름입니다(예: com.yourcompany.yourproject). 이 값을 복사합니다.
  3. Firebase 대화상자에서 복사한 패키지 이름을 Android package name 필드에 붙여넣습니다.
  4. Google 로그인 또는 Firebase 동적 링크(이러한 기능은 이 Codelab에서 다루는 내용이 아님)를 사용할 계획이 아니라면 여기에서 SHA-1 키는 필요하지 않습니다. Google Play에서 in_app_purchase 데이터를 가져올 계획이라면 나중에 키를 설정해야 합니다.
  5. 앱 등록을 클릭합니다.
  6. Firebase에서 계속 진행하여 안내에 따라 구성 파일 google-services.json을 다운로드합니다.

52f08aa18c8d59d0.png

  1. Flutter 앱 디렉터리로 이동하여 방금 다운로드한 google-services.json 파일을 android/app 디렉터리로 이동합니다.
  2. 다시 Firebase Console에서 나머지 단계를 건너뛰고 Firebase Console의 기본 페이지로 돌아갑니다.
  3. 마지막으로, Firebase에서 생성한 google-services.json 파일을 읽으려면 Google 서비스 Gradle 플러그인이 필요합니다.
  4. IDE 또는 편집기에서 android/app/build.gradle을 연 후 다음 코드 줄을 파일의 마지막 줄로 추가합니다.
apply plugin: 'com.google.gms.google-services'
  1. android/build.gradle을 연 후 다음과 같이 buildscript 태그 내에 새 종속 항목을 추가합니다.
buildscript {
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}
  1. 앱이 여전히 실행 중인 경우 앱을 닫았다가 다시 빌드하여 Gradle이 종속 항목을 설치할 수 있도록 합니다.

Android용 Flutter 앱 구성을 완료했습니다. iOS의 경우 이 Codelab(Flutter의 Firebase 알아보기)을 참고할 수 있습니다.

이 단계에서는 먼저, Firebase 애널리틱스 기능이 포함된 firebase_analytics라는 Firebase 애널리틱스 패키지를 사용합니다.

pubspec 파일은 Flutter 앱의 애셋을 관리합니다. pubspec.yaml에서 다음과 같이 종속 항목 목록에 firebase_analytics: ^6.2.0(firebase_analytics 6.2.0 이상)을 추가합니다.

dependencies:
   flutter:
      sdk: flutter
   cupertino_icons: ^0.1.2
   firebase_analytics: ^6.2.0   # add this line

Android 스튜디오의 편집기 뷰에서 pubspec 파일을 연 상태로 Packages get을 클릭합니다. 그러면 패키지를 프로젝트로 가져옵니다. 콘솔에 다음이 표시됩니다.

flutter packages get
Running "flutter packages get" in startup_namer...
Process finished with exit code 0

또한 Pub get을 실행하면 프로젝트에 가져온 모든 패키지 목록과 버전 번호가 포함된 pubspec.lock 파일이 자동으로 생성됩니다.

lib/main.dart에서, 다음과 같이 새 패키지를 가져옵니다.

import 'package:firebase_analytics/firebase_analytics.dart';

MyApp 클래스에서 생성자를 호출하여 FirebaseAnalytics 객체를 시작합니다.

class MyApp extends StatelessWidget {
 static FirebaseAnalytics analytics = FirebaseAnalytics();
   ...
}

이제 맞춤 이벤트 로그를 실행할 준비가 되었습니다.

Flutter 앱에서 새 템플릿을 생성하는 경우 기본 State 클래스 내에서 _counter 변수 및 _incrementCounter() 메서드를 확인할 수 있습니다. 이제 열성적인 특정 사용자가 증가 버튼을 다섯 번 넘게 클릭할 때 맞춤 이벤트를 로깅하려고 합니다.

나중에 특히 앱을 적극적으로 사용할 가능성이 있는 열성적인 사용자의 참여를 유도하기 위해 앱 캠페인을 실행할 예정입니다.

먼저, 초기화한 애널리틱스 객체를 스테이트풀(Stateful) 위젯에 전달하려고 합니다. 우선 analytics 매개변수를 MyHomePage 생성자에 추가합니다.

MyHomePage({Key key, this.title, this.analytics}) : super(key: key);

또한 생성자를 호출할 때도 analytics 매개변수를 추가합니다.

home: MyHomePage(
   title: 'Flutter Demo Home Page',
   analytics: analytics,
),

이제 logEvent() 메서드로 이벤트를 쉽게 로깅할 수 있습니다. 이 메서드에 뒤이어 _counter 변수 증가를 추가합니다.

void _incrementCounter() {
 setState(() {
   _counter++;

   //add this
   if(_counter > 5) {
     widget.analytics.logEvent(name: "clicked_counter");
   }

 });
}

이제 앱이 맞춤 이벤트 로그를 실행할 준비가 되었습니다.

또한 이벤트를 실행하는 데 미리 빌드된 메서드를 사용할 수도 있습니다.

f0742c956977df1d.png

이제 모든 것이 준비되었습니다. Android 스튜디오에서 'main.dart'를 실행합니다.

(선택사항) 매개변수를 사용하여 Firebase 애널리틱스에 추가 정보 보내기

매개변수를 통해 추가 정보를 보낼 수도 있습니다. 애널리틱스 보고서에서 보고를 위해 맞춤 매개변수를 등록할 수 있습니다. 또한 이러한 맞춤 매개변수를 각 보고서에 적용할 수 있는 잠재고객 정의의 필터로 사용할 수도 있습니다. 또한 앱이 BigQuery 프로젝트에 연결된 경우 BigQuery에서 맞춤 매개변수를 찾을 수 있습니다. Firebase의 BigQuery Export를 참고하세요.

여기서는 _counter 값을 매개변수로 설정합니다.

void _incrementCounter() {
 setState(() {
   _counter++;

   if(_counter > 5) {
     widget.analytics.logEvent(name: "clicked_counter", parameters: {'count' : _counter});
   }
 });
}

이벤트 확인 및 디버깅

몇 시간 내에 Firebase Console에서 로깅된 이벤트를 확인할 수 있습니다. Firebase Console에 있는 애널리틱스 섹션에서 Events 탭을 클릭하면 됩니다. 또한 이벤트를 클릭하여 clicked_counter 이벤트 내 값을 확인할 수도 있습니다.

32b01a1412ab2ba5.png

'전환으로 표시' 스위치를 오른쪽으로 밀어 clicked_counter를 전환으로 표시합니다.

e6b420a73db88f03.png

이벤트가 전환으로 표시되었는지 확인하려면 이벤트를 다시 확인합니다. 이벤트가 '전환' 탭에 있는 것을 확인할 수 있다면 이벤트를 전환으로 성공적으로 표시한 것입니다. 이 이벤트를 전환으로 표시하면 Google Ads가 Firebase에서 이 이벤트를 가져올 수 있습니다.

그러나 디버깅 목적으로 Firebase DebugView를 사용할 수 있습니다. 자세한 내용은 디버깅 이벤트를 참고하세요.

Firebase-Flutter 설정이 완료되면 작업 이벤트와 함께 앱 캠페인을 실행할 준비가 된 것입니다. 먼저, Firebase를 Google Ads에 연결합니다. Firebase를 Google Ads에 연결하면 앱 캠페인이 Firebase 이벤트를 가져올 수 있습니다. 이 프로세스를 통해 Google Ads가 잠재고객에 관해 더 자세히 알 수 있게 됨으로써 앱 캠페인을 촉진할 수 있습니다.

  1. '프로젝트 개요' 바로 옆에 있는 버튼을 클릭하여 Firebase 설정으로 이동합니다.
  2. '통합' 탭에 Google Ads 및 '연결' 버튼이 표시됩니다. '연결' 및 계속을 클릭합니다.

b711bf2e94fa0895.png

  1. Google Ads 계정을 선택합니다.

이제 Firebase 부분이 완료되었습니다.

Google Ads로 이동합니다.

  1. 맞춤 이벤트를 전환으로 가져오려면 로그인한 후 도구 및 설정 → 측정 → 전환으로 이동합니다.
  2. + 버튼을 클릭하여 새 전환 액션을 추가합니다.

73cec8d2e80eab03.png

  1. 'Google 애널리틱스 4(GA4) 속성'(Firebase)을 선택하고 '계속'을 클릭합니다.

4b1d8f6a712b2ac6.png

  1. 전환으로 표시된 모든 애널리틱스 이벤트를 확인할 수 있습니다. 앞서 구현한 clicked_counter 이벤트를 찾습니다.

ba1bbe6b2924fac8.png

  1. 이벤트를 선택하고 '가져오기 및 계속' 버튼을 클릭합니다.

ab35e341dff32e48.png

clicked_counter를 전환 액션으로 설정한 후 clicked_counter 이벤트를 5회 넘게 실행할 가능성이 있는 사용자를 타겟팅할 수 있는 액션 캠페인을 실행할 수 있습니다.

  1. 현재 계정의 캠페인 탭으로 이동하고 + 버튼을 클릭하여 새 캠페인을 시작합니다. [새 캠페인]을 클릭하고 계속합니다.
  2. 앱 설치 옵션과 함께 '앱 프로모션' 캠페인을 실행합니다.

af98c44d1476558.png

  1. 앱 이름, 패키지 이름 또는 게시자를 입력하여 앱을 찾습니다.
  2. '입찰' 섹션의 드롭다운 메뉴에서 '인앱 액션'을 선택합니다.
  3. 제공된 목록에서 맞춤 이벤트를 찾을 수 있습니다. '타겟 전환당비용'을 설정하고 다른 옵션도 설정합니다.

885956ad00592eb3.png

  1. 캠페인 설정을 완료합니다.

축하합니다. Firebase와 Google Ads를 성공적으로 통합했습니다. 이를 통해 Firebase에서 가져온 이벤트로 캠페인 실적을 향상시킬 수 있습니다.

학습한 내용

  • Flutter의 Firebase 애널리틱스를 구성하는 방법
  • Flutter 앱에서 Firebase 애널리틱스로 맞춤 이벤트를 로깅하는 방법
  • 이벤트를 가져와서 액션 캠페인에 사용하는 방법