Эта страница переведена с помощью Cloud Translation API.

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

1. Введение

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

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

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

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

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

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

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

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

2. Настройка

Получите код

В документации Firebase Guide представлен необходимый для этого проекта пример кода, который можно найти на GitHub.

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

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

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

Создайте проект Firebase.

Войдите в Firebase .

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

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

Чтобы узнать больше о проектах Firebase, см. раздел «Понимание проектов Firebase» .

4. Настройка Android Firebase

Настройка Android

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

Вы увидите диалоговое окно, показанное на следующем экране.

Важно указать имя пакета Android, которое вы получите на следующем шаге.

В каталоге вашего приложения откройте файл android/app/src/main/AndroidManifest.xml .
В элементе manifest найдите строковое значение атрибута package . Это значение представляет собой имя пакета Android (например, com.yourcompany.yourproject ). Скопируйте это значение.
В диалоговом окне Firebase вставьте скопированное имя пакета в поле Android package name .
Здесь нам не нужен ключ SHA-1, если только вы не планируете использовать вход через Google или динамические ссылки Firebase (обратите внимание, что они не входят в данный практический пример). Если вы планируете импортировать данные in_app_purchase из Google Play, вам придется установить ключ позже.
Нажмите «Зарегистрировать приложение» .
Продолжая работу в Firebase, следуйте инструкциям, чтобы загрузить файл конфигурации google-services.json .

Перейдите в каталог вашего приложения, затем переместите файл google-services.json (который вы только что скачали) в каталог android/app .
Вернувшись в консоль Firebase, пропустите оставшиеся шаги и вернитесь на главную страницу консоли Firebase.
Наконец, вам понадобится плагин Google Services Gradle для чтения файла google-services.json , сгенерированного Firebase.
В вашей 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 Analytics необходимо вставить код как в веб-приложение, так и в Android-приложение.

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

Сначала создайте файл JavaScript для использования в HTML-файле. В примере кода файл js называется index.js. Вам нужно создать функцию "logEvent" для вызова AnalyticsWebInterface для Android и messageHander для iOS, как показано в приведенном ниже коде.

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

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

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

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

В терминале перейдите в каталог web (например, cd web ) и выполните следующие команды:
npm install -g firebase-tools установит Firebase CLI.
firebase login
firebase init
При выборе функции, которую вы хотите настроить, выберите «Хостинг».
Выберите проект, который вы создали для своего Android-приложения.
Для всех остальных запросов оставьте значения по умолчанию.
firebase deploy --only hosting - развертывание на хостинге Firebase.

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

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

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

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

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

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

Если ваш код работает корректно, вы увидите в логе примерно следующее.

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

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

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

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

Отметьте event1 как конверсию, переместив переключатель «Отметить как конверсию» вправо.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы узнали

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