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

1. معرفی

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

چیزی که خواهی ساخت

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

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

چیزی که یاد خواهید گرفت

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

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

• اندروید استودیو 3.6 یا بالاتر
• حساب Firebase

2. راه اندازی

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

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

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

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

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

یک پروژه Firebase ایجاد کنید

1. وارد Firebase شوید.

در کنسول Firebase، روی Add Project (یا Create a project) کلیک کنید و پروژه Firebase خود را به عنوان Webview-test-codelab یا هر نامی که دوست دارید نامگذاری کنید.

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

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

4. پیکربندی Firebase برای اندروید

اندروید را در Firebase Console پیکربندی کنید

1. در صفحه اصلی کنسول Firebase، می‌توانید روی نماد Android مانند زیر کلیک کنید.

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

سپس صفحه «افزودن Firebase به برنامه Android خود» را مانند زیر خواهید دید.

2. می‌توانید نام بسته Android خود (مثلاً com.xxxx.myproject) را در android/app/src/main/AndroidManifest.xml در فهرست برنامه‌های خود بیابید.

package="com.xxxx.myproject"

3. کلید SHA-1 در اینجا مورد نیاز نیست. این کلید فقط زمانی مورد نیاز است که می‌خواهید از Google Sign In یا Firebase Dynamic Links استفاده کنید یا داده‌های in_app_purchase را از Google Play وارد کنید که در حیطه این Codelab نیست.
4. روی ثبت برنامه کلیک کنید.
5. فایل کانفیگ google-services.json را در کنسول Firebase دانلود کنید و این فایل را در فهرست راهنمای android/app در پروژه برنامه خود کپی و جایگذاری کنید.
6. به کنسول Firebase برگردید، مراحل باقیمانده را رد کنید و به صفحه اصلی کنسول Firebase برگردید.
7. در نهایت، برای خواندن فایل google-services.json که توسط Firebase ایجاد شده است، به افزونه Google Services Gradle نیاز دارید.
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. یک رابط وب Analytics در وب ایجاد کنید و رویدادهای سفارشی را ثبت کنید

برای ردیابی رویدادها در نمای وب با Google Analytics، باید کد را هم در وب و هم در برنامه اندروید وارد کنید.

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

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

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

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

6. میزبان وب دایرکتوری برای دریافت URL صفحه وب

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

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

با این کار Firebase CLI نصب می شود.

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

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

7. کد رابط را در برنامه اندروید توسعه دهید

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

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

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

برای مشاهده کل کد آن، لطفاً به نمونه کدی که از GitHub دانلود کرده اید در مرحله "راه اندازی" مراجعه کنید.

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

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

> 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 بررسی کنید، می‌توانید از تب Realtime نیز استفاده کنید. به کنسول Firebase بروید و مانند زیر روی تب Realtime کلیک کنید.

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

اگر کد شما به درستی اجرا شده باشد، رویدادها را از برنامه Android در تب Realtime مشاهده خواهید کرد.

پس از چند ساعت، می توانید رویدادهای ثبت شده خود را در تب رویدادها در کنسول Firebase مشاهده کنید. فقط روی تب رویدادها از بخش Analytics موجود در کنسول 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. در تب Integrations ، Google Ads و یک دکمه پیوند را مشاهده خواهید کرد. روی پیوند کلیک کنید و سپس روی ادامه کلیک کنید.

3. حساب Google Ads را انتخاب کنید.

احتیاط: اگر رویداد هدف به‌عنوان رویداد تبدیل علامت‌گذاری نشود، Google Ads نمی‌تواند آن را وارد کند. مطمئن شوید که رویداد به درستی به عنوان تبدیل علامت گذاری شده است.

اکنون قسمت Firebase انجام شده است.

به Google Ads بروید.

1. وارد شوید و به Tools & Settings > Measurement > Conversions بروید تا رویدادهای سفارشی را به عنوان تبدیل وارد کنید.
2. برای افزودن اقدامات تبدیل جدید، روی دکمه + کلیک کنید.

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

4. می‌توانید همه رویدادهای تحلیلی را که به‌عنوان تبدیل علامت‌گذاری شده‌اند، ببینید. رویداد event1 را که قبلا اجرا کرده بودیم پیدا کنید.

5. عملکرد را بررسی کنید، روی Import کلیک کنید و سپس روی Continue کلیک کنید.

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

10. راه اندازی کمپین های اکشن اپلیکیشن با رویدادهای وارداتی

مهم : برای راه‌اندازی موفقیت‌آمیز یک کمپین برنامه، باید یک برنامه سطح تولید در Google Play دریافت کنید. با این حال، اگر هنوز برای انتشار آماده نیستید، می توانید فعلا از این مرحله صرف نظر کنید.

6. به تب کمپین حساب فعلی خود بروید و با کلیک بر روی دکمه + کمپین جدیدی را شروع کنید. روی [کمپین جدید] و سپس روی ادامه کلیک کنید.
7. با گزینه App Installs یک کمپین تبلیغاتی برنامه راه اندازی کنید.

8. با تایپ نام برنامه، نام بسته یا ناشر برنامه خود را پیدا کنید.
9. در بخش Bidding ، در منوی کشویی ، اقدامات درون برنامه را انتخاب کنید.
10. رویداد سفارشی خود را در لیست ارائه شده پیدا کنید. هزینه هدف برای هر اقدام را تنظیم کنید و هر گزینه اضافی را تکمیل کنید.

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

11. تبریک می گویم

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

تو یاد گرفتی

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

12. مراجع

راهنمای رسمی

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

راه اندازی Firebase و Google Ads

• تبلیغات Google با Google Analytics برای رویدادهای سفارشی Firebase - Android
• راه اندازی کمپین های تبلیغاتی گوگل با رویدادهای سفارشی و فلاتر گوگل آنالیتیکس