ردیابی رویدادها در WebView با Google Analytics برای Firebase

۱. مقدمه

آخرین به‌روزرسانی: 2022-02-25

آنچه خواهید ساخت

در این آزمایشگاه کد، یاد خواهید گرفت که چگونه رویدادها را از یک صفحه وب در WebView به یک کد بومی ارسال کنید تا GA4F بتواند رویدادها را ردیابی کند.

ما از یک برنامه اندروید نمونه Hybrid استفاده خواهیم کرد که یک صفحه وب را با استفاده از WebView فراخوانی می‌کند.

آنچه یاد خواهید گرفت

  • نحوه مقداردهی اولیه GA4F (گوگل آنالیتیکس برای فایربیس) در برنامه Hybrid
  • نحوه ایجاد رویدادها و پارامترهای سفارشی در صفحه وب
  • نحوه ارسال رویدادهای یک صفحه وب در WebView به کد بومی
  • نحوه اشکال زدایی
  • نحوه وارد کردن رویدادها و استفاده از آنها برای کمپین‌های اکشن.

آنچه نیاز دارید

  • اندروید استودیو ۳.۶ یا بالاتر
  • حساب فایربیس

۲. راه‌اندازی

کد را دریافت کنید

راهنمای رسمی Firebase کد نمونه را در GitHub ارائه می‌دهد. ما برای این پروژه به آن نیاز داریم.

7074c0e83b5fd4b1.png

برای شروع، باید کد را دانلود کرده و آن را در محیط توسعه مورد علاقه خود باز کنید. ما از دو دایرکتوری استفاده خواهیم کرد: android و web. دایرکتوری "android" برای برنامه اندروید و دایرکتوری "web" برای یک صفحه وب است که توسط برنامه از طریق WebView فراخوانی می‌شود.

۳. ایجاد و راه‌اندازی یک پروژه Firebase

برای شروع کار با Firebase، باید یک پروژه Firebase ایجاد و راه‌اندازی کنید.

ایجاد یک پروژه فایربیس

  1. وارد فایربیس شوید.

در کنسول Firebase، روی افزودن پروژه (یا ایجاد یک پروژه) کلیک کنید و نام پروژه Firebase خود را Webview-test-codelab یا هر نام دیگری که دوست دارید، قرار دهید.

fd93054e27d6b386.png

  1. روی گزینه‌های ایجاد پروژه کلیک کنید. در صورت درخواست، شرایط Firebase را بپذیرید. شما باید Google Analytics را برای این پروژه فعال کنید، زیرا برای ردیابی رویدادهای عملی و تجزیه و تحلیل تبدیل‌ها به رویدادهای Google Analytics نیاز دارید.

d711cb170a42a355.png

برای کسب اطلاعات بیشتر در مورد پروژه‌های فایربیس، به بخش «درک پروژه‌های فایربیس» مراجعه کنید.

۴. پیکربندی فایربیس برای اندروید

پیکربندی اندروید در کنسول فایربیس

  1. در صفحه اصلی کنسول فایربیس، می‌توانید مانند تصویر زیر روی آیکون اندروید کلیک کنید. ۱۴۳۹۸۳fdc۸۶ff۶۷۰.png

یا می‌توانید در نوار ناوبری سمت چپ به نمای کلی پروژه بروید و روی دکمه اندروید در قسمت «شروع با افزودن Firebase به برنامه خود» کلیک کنید.

سپس صفحه "افزودن Firebase به برنامه اندروید" را مانند زیر مشاهده خواهید کرد.

74e684bd64bd8d9d.png

  1. شما می‌توانید نام بسته‌ی اندروید خود (مثلاً com.xxxx.myproject) را در android/app/src/main/AndroidManifest.xml در دایرکتوری برنامه‌ی خود پیدا کنید. 
package="com.xxxx.myproject"
  1. کلید SHA-1 اینجا مورد نیاز نیست. این کلید فقط زمانی مورد نیاز است که بخواهید از Google Sign In یا Firebase Dynamic Links استفاده کنید یا داده‌های in_app_purchase را از Google Play وارد کنید که در محدوده این codelab نیست.
  2. روی ثبت برنامه کلیک کنید.
  3. فایل پیکربندی google-services.json را از کنسول Firebase دانلود کنید و این فایل را در پوشه android/app در پروژه برنامه خود کپی و جایگذاری کنید. a2c930b2dd517980.png
  4. به کنسول Firebase برگردید، مراحل باقی مانده را رد کنید و به صفحه اصلی کنسول Firebase برگردید.
  5. در نهایت، برای خواندن فایل google-services.json که توسط Firebase تولید شده است، به افزونه Google Services Gradle نیاز دارید.
  6. در 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 بتواند وابستگی‌ها را نصب کند.

پیکربندی برنامه شما برای اندروید تمام شد!

۵. یک رابط وب تحلیلی در وب ایجاد کنید و رویدادهای سفارشی را ثبت کنید

برای ردیابی رویدادها در یک نمای وب با گوگل آنالیتیکس، باید کد را هم در برنامه وب و هم در برنامه اندروید وارد کنید.

در این بخش، بیایید بررسی کنیم که کدام کد را باید در صفحه وب قرار دهید. a0f31cf21ea85d1.png

ابتدا، یک فایل جاوا اسکریپت برای استفاده در یک فایل html ایجاد کنید. در کد نمونه، فایل js با نام index.js نامگذاری شده است. شما باید تابع "logEvent" را برای فراخوانی "AnayticsWebInterface" برای اندروید و "messageHander" را برای iOS مانند کد زیر ایجاد کنید.

66a13d9290c3b2c7.png

و این تابع را در جایی که می‌خواهید رویداد را در فایل html مانند زیر پیگیری کنید، فراخوانی کنید.

۱bf11ba7b8fae269.png

وقتی رویدادی در WebView در برنامه اندروید رخ می‌دهد، "window.AnalyticsWebInterface" فراخوانی می‌شود و رویداد را به کد WebInterface در برنامه ارسال می‌کند.

۶. دایرکتوری وب میزبان برای دریافت آدرس صفحه وب

قبل از اینکه یک صفحه وب را در WebView در برنامه خود فراخوانی کنید، به یک آدرس اینترنتی (url) صفحه وب نیاز دارید. روش‌های زیادی برای میزبانی صفحات وب وجود دارد. در این آزمایشگاه کد، ما از سرویس میزبانی Firebase فقط برای راحتی استفاده خواهیم کرد.

  • در ترمینال خود، وارد دایرکتوری وب شوید (مثلاً cd web ) و دستورات زیر را اجرا کنید:
  • npm install -g firebase-tools

این دستور، رابط خط فرمان فایربیس (Firebase CLI) را نصب خواهد کرد.

  • firebase login
  • firebase init
  • وقتی از شما پرسیده شد که می‌خواهید کدام ویژگی را تنظیم کنید، «میزبانی» را انتخاب کنید.
  • پروژه‌ای را که برای برنامه اندروید خود تنظیم کرده‌اید، انتخاب کنید.
  • برای همه درخواست‌های باقی‌مانده، پیش‌فرض‌ها را بپذیرید.
  • firebase deploy --only hosting - به میزبانی فایربیس مستقر می‌شود.

a2c132502ffa8a04.png

  • پس از دریافت آدرس صفحه وب، به پروژه برنامه خود در اندروید استودیو بروید و آدرس وب ساخته شده در این مرحله را مانند زیر در WebView وارد کنید.

86b44d7bf72383a7.png

۷. توسعه کد رابط کاربری در اپلیکیشن اندروید

برای ردیابی رویدادها در وب ویو با GA4F، باید کد را هم در وب و هم در اندروید وارد کنید. در این بخش، بیایید بررسی کنیم که برای دریافت رویدادها از صفحه وب در وب ویو، باید کدام کد را در برنامه اندروید قرار دهید.

برای ایجاد کلاس "AnalyticsWebInterface" فایل "AnalyticsWebInterface.java" را ایجاد کنید. در این کلاس، باید @JavascriptInterface را برای اتصال تابع logEvent در فایل web js مانند زیر کدنویسی کنید.

796981318ff44346.png

در مرحله بعد، باید رابط جاوا اسکریپت را در Activity اضافه کنید که WebView را مانند زیر فراخوانی می‌کند.

b1bd1d9bb50d418f.png

برای مشاهده‌ی کل کد مربوط به آن، لطفاً به نمونه کدی که از گیت‌هاب در مرحله‌ی «راه‌اندازی» دانلود کرده‌اید، مراجعه کنید.

۸. بررسی و اشکال‌زدایی رویدادها

برای اشکال‌زدایی رویدادها، می‌توانید پس از اتصال دستگاه آزمایشی یا راه‌اندازی شبیه‌ساز، از کد زیر در ترمینال اندروید استودیو استفاده کنید.

> adb shell setprop debug.firebase.analytics.app [نام بسته برنامه]

> تابع setprop در پوسته adb به نام log.tag.FA VERBOSE

> تابع setprop در پوسته adb به نام log.tag.FA-SVC VERBOSE

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

روی «LOG EVENT 1» در برنامه خود کلیک کنید و اگر کد شما به خوبی کار کند، گزارش را مانند زیر مشاهده خواهید کرد.

f84d06d3534ad034.png

اگر می‌خواهید در کنسول Firebase بررسی کنید، می‌توانید از تب Realtime نیز استفاده کنید. به کنسول Firebase بروید و مانند تصویر زیر روی تب Realtime کلیک کنید.

سپس، با استفاده از تابع "افزودن مقایسه"، رویداد پلتفرم اندروید را فیلتر کنید.

aa804eb02f0b7d3f.png

اگر کد شما به درستی پیاده‌سازی شده باشد، رویدادهای برنامه اندروید را در تب Realtime مشاهده خواهید کرد. 334afcae650c58d4.png

چند ساعت دیگر، می‌توانید رویدادهای ثبت‌شده خود را در تب رویدادها در کنسول Firebase مشاهده کنید. کافیست روی تب رویدادها از بخش تجزیه و تحلیل موجود در کنسول Firebase کلیک کنید. همچنین می‌توانید مقادیر داخل رویداد event1 را تنها با کلیک روی رویداد بررسی کنید.

b72cf934a76e174b.png

برای وارد کردن event1 به عنوان یک تبدیل در گوگل ادز، با کشیدن دکمه‌ی «علامت‌گذاری به عنوان تبدیل» به سمت راست، آن را به عنوان تبدیل علامت‌گذاری کنید.

486010186b929deb.png

اگر رویداد در تب Conversion باشد، شما با موفقیت آن را به عنوان یک تبدیل علامت‌گذاری کرده‌اید. اکنون گوگل ادز می‌تواند این رویداد را از Firebase وارد کند.

برای اشکال‌زدایی، از Firebase DebugView استفاده کنید. برای جزئیات بیشتر، به رویداد اشکال‌زدایی مراجعه کنید.

۹. وارد کردن رویدادهای تحلیلی در گوگل ادز

پس از اتمام تنظیمات فایربیس، آماده راه‌اندازی کمپین‌های اپلیکیشن با رویدادهای اکشن هستید. با پیوند دادن فایربیس به گوگل ادز شروع کنید. با پیوند دادن فایربیس به گوگل ادز، کمپین‌های اپلیکیشن می‌توانند رویدادهای فایربیس را وارد کنند. این فرآیند همچنین به گوگل ادز کمک می‌کند تا با فراهم کردن امکان کسب اطلاعات بیشتر در مورد مخاطبان، کمپین‌های اپلیکیشن را تقویت کند.

  1. با کلیک روی دکمه کنار نمای کلی پروژه ، به تنظیمات فایربیس بروید.
  2. در تب Integrations ، گوگل ادز و یک دکمه‌ی لینک (Link) را خواهید دید. روی لینک (Link) کلیک کنید و سپس روی ادامه (Continue) کلیک کنید.

67fc1b7f75f9dcaa.png

  1. حساب کاربری گوگل ادز را انتخاب کنید.

حالا بخش Firebase تمام شده است.

به بخش تبلیغات گوگل بروید.

  1. وارد شوید و برای وارد کردن رویدادهای سفارشی به عنوان تبدیل، به ابزارها و تنظیمات > اندازه‌گیری > تبدیل‌ها بروید.
  2. برای افزودن اقدامات تبدیل جدید، روی دکمه + کلیک کنید.

1eb800ed1ae776cc.png

  1. ویژگی‌های Google Analytics 4 (Firebase) را انتخاب کنید و روی ادامه کلیک کنید.

8b0a0b34b1d3eae2.png

  1. می‌توانید تمام رویدادهای تحلیلی که به عنوان تبدیل علامت‌گذاری شده‌اند را مشاهده کنید. رویداد event1 را که قبلاً پیاده‌سازی کردیم، پیدا کنید.

e2bd5e1f7b9b73d9.png

  1. عملکرد را بررسی کنید، روی وارد کردن (Import) کلیک کنید و سپس روی ادامه (Continue) کلیک کنید.

2402f11ee4e3ed2e.png

پس از تنظیم event1 به عنوان یک اقدام تبدیل، می‌توانید کمپین‌های اقدام برنامه را با رویداد event1 راه‌اندازی کنید.

۱۰. راه‌اندازی کمپین‌های اکشن اپلیکیشن با رویدادهای وارد شده

  1. به برگه کمپین حساب فعلی خود بروید و با کلیک بر روی دکمه + ، یک کمپین جدید شروع کنید. روی [کمپین جدید] کلیک کنید و سپس روی ادامه کلیک کنید.
  2. با گزینه نصب اپلیکیشن، یک کمپین تبلیغاتی اپلیکیشن راه‌اندازی کنید.

eda56ea9bd38c6d5.png

  1. با تایپ نام برنامه، نام بسته یا ناشر، برنامه خود را پیدا کنید.
  2. در بخش پیشنهاد قیمت ، از منوی کشویی، گزینه «اقدامات درون برنامه‌ای» را انتخاب کنید.
  3. رویداد سفارشی خود را در لیست ارائه شده پیدا کنید. هزینه هدف برای هر اقدام را تعیین کنید و گزینه‌های اضافی را تکمیل کنید.

438e581eb1b40003.png

  1. تنظیمات کمپین خود را تکمیل کنید.

۱۱. تبریک

تبریک می‌گویم، شما با موفقیت فایربیس و گوگل ادز خود را ادغام کردید! این به شما کمک می‌کند تا عملکرد کمپین خود را با رویدادهای وارد شده در فایربیس افزایش دهید.

یاد گرفتی.

  • نحوه مقداردهی اولیه GA4F (گوگل آنالیتیکس برای فایربیس) در برنامه Hybrid
  • نحوه ایجاد رویدادها و پارامترهای سفارشی در صفحه وب
  • نحوه ارسال رویدادهای یک صفحه وب در WebView به کد بومی
  • نحوه اشکال زدایی
  • نحوه وارد کردن رویدادها و استفاده از آنها برای کمپین‌های اکشن.

۱۲. منابع

راهنمای رسمی

  • استفاده از Analytics در WebView - Firebase - Google

تنظیمات فایربیس و گوگل ادز