Отслеживайте события в WebView с помощью Google Analytics для Firebase

1. Введение

Последнее обновление: 25 февраля 2022 г.

Что ты построишь

В этой лаборатории вы узнаете, как пересылать события с веб-страницы в WebView в собственный код, чтобы GA4F мог отслеживать события.

Мы будем использовать пример гибридного приложения для Android, которое вызывает веб-страницу с помощью WebView.

Что вы узнаете

• Как инициализировать GA4F (Google Analytics для Firebase) в гибридном приложении
• Как создавать собственные события и параметры на веб-странице
• Как перенаправить события на веб-странице в WebView в собственный код
• Как отладить
• Как импортировать события и использовать их для кампаний действий.

Что вам понадобится

• Android Studio 3.6 или выше
• Аккаунт Firebase

2. Приступаем к настройке

Получить код

Официальное руководство Firebase предоставляет пример кода на GitHub. Нам это нужно для этого проекта.

Чтобы начать, вам нужно скачать код и открыть его в вашей любимой среде разработки. Мы будем использовать 2 каталога: android и web. Каталог «android» предназначен для приложения Android, а каталог «web» предназначен для веб-страницы, которая будет вызываться приложением через WebView.

3. Создайте и настройте проект Firebase.

Чтобы начать работу с Firebase, вам необходимо создать и настроить проект Firebase.

Создать проект Firebase

1. Войдите в Firebase .

В консоли Firebase нажмите «Добавить проект» (или «Создать проект») и назовите свой проект Firebase как Webview-test-codelab или любое другое имя, которое вам нравится.

2. Просмотрите параметры создания проекта. Примите условия Firebase, если будет предложено. Вам следует включить Google Analytics для этого проекта, поскольку вам нужны события Google Analytics для отслеживания событий действий и анализа конверсий.

Дополнительные сведения о проектах Firebase см. в разделе Общие сведения о проектах Firebase .

4. Конфигурация Firebase для Android

Настройте Android в консоли Firebase

1. На главной странице консоли Firebase вы можете щелкнуть значок Android, как показано ниже.

Или вы можете перейти к обзору проекта на левой панели навигации и нажать кнопку Android в разделе «Начните с добавления Firebase в свое приложение».

Затем вы увидите экран «Добавьте Firebase в ваше приложение для Android», как показано ниже.

2. Вы можете найти имя своего пакета Android (например, com.xxxx.myproject) в android/app/src/main/AndroidManifest.xml в каталоге вашего приложения.

package="com.xxxx.myproject"

3. Ключ SHA-1 здесь не нужен. Этот ключ необходим только в том случае, если вы хотите использовать вход в Google или динамические ссылки Firebase или импортировать данные in_app_purchase из Google Play, что выходит за рамки этой лаборатории кода.
4. Нажмите «Зарегистрировать приложение» .
5. Загрузите файл конфигурации google-services.json в консоли Firebase, скопируйте и вставьте этот файл в каталог android/app вашего проекта приложения.
6. Вернувшись в консоль Firebase, пропустите оставшиеся шаги и вернитесь на главную страницу консоли Firebase.
7. Наконец, вам понадобится плагин Google Services Gradle для чтения файла google-services.json , созданного Firebase.
8. В вашей IDE или редакторе откройте android/app/build.gradle , затем добавьте следующую строку в качестве последней строки в файле:

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

13. Откройте android/build.gradle . Затем добавьте новую зависимость внутри тега buildscript .

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

14. Если ваше приложение все еще работает, закройте и пересоберите его, чтобы Gradle мог устанавливать зависимости.

Вы закончили настройку приложения для Android!

5. Разработайте веб-интерфейс аналитики в Интернете и регистрируйте пользовательские события.

Чтобы отслеживать события в веб-просмотре с помощью Google Analytics, вам необходимо вставить код как в веб-приложение, так и в приложение для Android.

В этой части давайте посмотрим, какой код нужно разместить на веб-странице.

Сначала создайте файл javascript для использования в файле html. В примере кода файл js называется index.js. Вам необходимо создать функцию «logEvent» для вызова «AnayticsWebInterface» для Android и «messageHander» для iOS, как показано ниже.

И вызовите эту функцию, если вы хотите отслеживать событие в html-файле, как показано ниже.

Когда событие запускается в приложении WebView в Android, будет вызываться «window.AnalyticsWebInterface», и оно перенаправит событие в код WebInterface в приложении.

6. Веб-каталог хоста для получения URL-адреса веб-страницы.

Прежде чем вы вызовете веб-страницу в WebView в своем приложении, вам понадобится URL-адрес веб-страницы. Будет много способов размещения веб-страниц. В этой лаборатории кода мы будем использовать службу хостинга Firebase просто для удобства.

• В своем терминале войдите в веб-каталог (например, cd web ) и выполните следующие команды:
• npm install -g firebase-tools

это установит Firebase CLI.

• firebase login
• firebase init
• Когда вас спросят, какую функцию вы хотите настроить, выберите «Хостинг».
• Выберите проект, который вы настроили для своего приложения Android.
• Примите значения по умолчанию для всех остальных запросов.
• firebase deploy --only hosting — развернуть на хостинге Firebase.

• Получив URL-адрес веб-страницы, перейдите к проекту своего приложения в Android Studio и вставьте URL-адрес веб-страницы, только что созданный на этом этапе, в WebView, как показано ниже.

7. Разработать код интерфейса в приложении для Android.

Чтобы отслеживать события в WebView с помощью GA4F, вам необходимо вставить код как в веб, так и в Android. В этой части давайте посмотрим, какой код нужно поместить в Android-приложение, чтобы получать события с веб-страницы в WebView.

Создайте файл «AnalyticsWebInterface.java», чтобы создать класс «AnalyticsWebInterface». В этом классе вам нужно написать @JavascriptInterface для подключения функции logEvent в файле веб-js, как показано ниже.

Затем вам нужно добавить интерфейс JavaScript в действие, которое вызывает WebView, как показано ниже.

Чтобы просмотреть весь код, обратитесь к примеру кода, который вы скачали с GitHub на этапе «Начало настройки».

8. Проверка и отладка событий

Для событий отладки вы можете использовать следующий код в терминале Android Studio после подключения тестового устройства или запуска эмулятора.

> adb Shell setprop debug.firebase.analytics.app [имя пакета приложения]

> оболочка adb setprop log.tag.FA ПОДРОБНО

> оболочка adb setprop log.tag.FA-SVC ПОДРОБНО

> adb logcat -v time -s FA FA-SVC

Нажмите «ЗАПИСАТЬ СОБЫТИЕ 1» в своем приложении, и если ваш код работает хорошо, вы увидите журнал, как показано ниже.

Если вы хотите проверить консоль Firebase, вы также можете использовать вкладку Realtime. Перейдите в консоль Firebase и перейдите на вкладку Realtime, как показано ниже.

Затем отфильтруйте событие платформы Android с помощью функции «Добавить сравнение».

Вы увидите события из приложения Android на вкладке «В реальном времени», если ваш код реализован правильно.

Через несколько часов вы сможете увидеть зарегистрированные события на вкладке «События» в консоли Firebase. Просто нажмите на вкладку «События» в разделе «Аналитика», присутствующем в консоли Firebase. Вы также можете проверить значения внутри события event1 просто щелкнув событие.

Чтобы импортировать event1 как конверсию в Google Рекламе, отметьте его как конверсию, сдвинув переключатель Отметить как конверсию вправо.

Если событие находится на вкладке «Конверсия», значит, вы успешно пометили событие как конверсию. Google Реклама теперь сможет импортировать это событие из Firebase.

Для целей отладки используйте Firebase DebugView. Дополнительные сведения см. в разделе Событие отладки .

9. Импорт событий аналитики в Google Ads

После завершения настройки Firebase вы готовы запустить кампании для приложений с событиями действий. Начните с привязки Firebase к Google Рекламе . Связав Firebase с Google Рекламой, кампании для приложений смогут импортировать события Firebase. Этот процесс также помогает Google Ads стимулировать кампании для приложений, позволяя узнать больше об их аудитории.

1. Перейдите в настройки Firebase , нажав кнопку рядом с пунктом «Обзор проекта» .
2. На вкладке «Интеграции» вы увидите Google Рекламу и кнопку «Ссылка» . Нажмите «Ссылка» , а затем нажмите « Продолжить» .

3. Выберите аккаунт Google Рекламы.

Внимание! Если целевое событие не помечено как событие-конверсия, Google Реклама не сможет его импортировать. Убедитесь, что событие правильно помечено как конверсия.

Теперь часть Firebase завершена.

Зайдите в Google Рекламу .

1. Войдите в систему и выберите «Инструменты и настройки» > «Измерение» > «Конверсии» , чтобы импортировать пользовательские события как конверсии.
2. Нажмите кнопку + , чтобы добавить новые действия-конверсии.

3. Выберите ресурсы Google Аналитики 4 (Firebase) и нажмите Продолжить .

4. Вы можете увидеть все события аналитики, помеченные как конверсии. Найдите событие event1 , которое мы реализовали ранее.

5. Проверьте действие, нажмите «Импортировать», а затем нажмите «Продолжить» .

Настроив event1 в качестве действия-конверсии, вы можете запускать кампании действий для приложений с событием event1 .

10. Запуск кампаний приложений с импортированными событиями.

Важно ! Чтобы успешно запустить кампанию для приложений, вам необходимо получить приложение производственного уровня в Google Play. Однако, если вы еще не готовы к публикации, вы можете пока пропустить этот шаг.

6. Перейдите на вкладку «Кампания» вашего текущего аккаунта и начните новую кампанию, нажав кнопку «+» . Нажмите [Новая кампания] , а затем нажмите Продолжить .
7. Запустите кампанию по продвижению приложений с опцией «Установки приложений» .

8. Найдите свое приложение, введя имя приложения, имя пакета или издателя.
9. В разделе «Ставки» выберите «Действия в приложении» в раскрывающемся меню.
10. Найдите свое индивидуальное событие в предоставленном списке. Установите целевую цену за действие и укажите дополнительные параметры.

11. Завершите настройку кампании.

11. Поздравления

Поздравляем, вы успешно интегрировали Firebase и Google Ads! Это поможет вам повысить эффективность вашей кампании с помощью событий, импортированных из Firebase.

Вы узнали

• Как инициализировать GA4F (Google Analytics для Firebase) в гибридном приложении
• Как создавать собственные события и параметры на веб-странице
• Как перенаправить события на веб-странице в WebView в собственный код
• Как отладить
• Как импортировать события и использовать их для кампаний действий.

12. Ссылки

Официальное руководство

• Использование аналитики в WebView – Firebase – Google

Настройка Firebase и Google Рекламы

• Google Реклама с пользовательскими событиями Google Analytics для Firebase – Android
• Запуск кампаний Google Ads с использованием пользовательских событий Google Analytics и Flutter