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

1. Введение

Последнее обновление: 25.02.2022

Что вы построите

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

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

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

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

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

• Android Studio 3.6 или выше
• Учетная запись Firebase

2. Настройка

Получите код

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

Для начала вам потребуется скачать код и открыть его в вашей любимой среде разработки. Мы будем использовать две директории: 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 или импортировать данные о покупках внутри приложений из 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-файле. В примере кода файл JavaScript называется index.js. Вам нужно создать функцию "logEvent" для вызова функции "AnayticsWebInterface" для Android и функции "messageHander" для iOS, как показано в приведенном ниже коде.

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

Когда в приложении Android в WebView срабатывает событие, вызывается метод "window.AnalyticsWebInterface", который перенаправляет событие в код WebInterface в приложении.

6. Разместите веб-каталог, чтобы получить URL веб-страницы.

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

• В терминале перейдите в каталог web (например, 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` из веб-файла JavaScript, как показано ниже.

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

Чтобы увидеть полный код, пожалуйста, обратитесь к примеру кода, который вы скачали с GitHub на шаге "Настройка".

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

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

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

> adb shell setprop log.tag.FA VERBOSE

> adb shell setprop log.tag.FA-SVC VERBOSE

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

Нажмите кнопку "LOG EVENT 1" в вашем приложении, и если ваш код работает корректно, вы увидите запись в журнале, как показано ниже.

Для проверки в консоли Firebase можно также использовать вкладку «В режиме реального времени». Перейдите в консоль Firebase и нажмите вкладку «В режиме реального времени», как показано ниже.

Затем отфильтруйте события платформы Android, используя функцию "Добавить сравнение".

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

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

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

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

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

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

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

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

3. Выберите аккаунт Google Ads.

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

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

Перейдите в Google Ads .

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

3. Выберите раздел «Свойства Google Analytics 4 (Firebase)» и нажмите «Продолжить» .

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

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

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

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

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

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

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

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

11. Поздравляем!

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

Вы узнали

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

12. Список литературы

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

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

Настройка Firebase и Google Ads

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