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

1. Введение

Последнее обновление: 22 декабря 2021 г.

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

В этой лаборатории вы узнаете, как пересылать события с веб-страницы в 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. Конфигурация Android Firebase

Настроить Android

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

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

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

Совет . Прочтите раздел «Установка идентификатора приложения», чтобы получить дополнительную информацию об идентификаторах пакетов и приложений.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если ваш код работает хорошо, вы увидите журнал, как показано ниже.

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

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

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

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

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

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

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

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

После завершения настройки Firebase-Flutter вы готовы запустить кампании для приложений с событиями действий. Начните с привязки 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 более 5 раз.

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

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

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

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

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

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

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

Вы узнали

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