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

1. مقدمه

آخرین به روز رسانی: 2021-12-22

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

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

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

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

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

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

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

2. راه اندازی

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

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

7074c0e83b5fd4b1.png

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

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

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

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

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

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

fd93054e27d6b386.png

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

e58151a081f0628.png

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

4. پیکربندی Android Firebase

3e5b8f1b6ca538c4.png

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

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

گفتگوی نشان داده شده در صفحه زیر را خواهید دید.

3b7d3b33d81fe8ea.png

  1. مقدار مهمی که باید ارائه کنید، نام بسته اندروید است که با استفاده از مرحله زیر به دست خواهید آورد.
  1. در فهرست برنامه خود، فایل android/app/src/main/AndroidManifest.xml را باز کنید.
  2. در عنصر manifest ، مقدار رشته ویژگی package را پیدا کنید. این مقدار نام بسته Android است (چیزی شبیه com.yourcompany.yourproject ). این مقدار را کپی کنید.
  3. در محاوره Firebase، نام بسته کپی شده را در قسمت Android package name قرار دهید.
  4. ما در اینجا به کلید SHA-1 نیاز نداریم، مگر اینکه قصد استفاده از پیوندهای دینامیک ورود به سیستم Google یا Firebase را داشته باشید (توجه داشته باشید که اینها بخشی از این آزمایشگاه کد نیستند). اگر قصد دارید داده‌های in_app_purchase را از Google Play وارد کنید، باید بعداً کلید را تنظیم کنید.
  5. روی ثبت برنامه کلیک کنید.
  6. برای ادامه در Firebase، دستورالعمل‌ها را برای دانلود فایل پیکربندی google-services.json دنبال کنید.

52f08aa18c8d59d0.png

  1. به دایرکتوری برنامه خود بروید، سپس فایل google-services.json (که به تازگی دانلود کرده اید) را به پوشه android/app منتقل کنید.
  2. به کنسول Firebase برگردید، مراحل باقیمانده را رد کنید و به صفحه اصلی کنسول Firebase برگردید.
  3. در نهایت، برای خواندن فایل google-services.json که توسط Firebase تولید شده است، به افزونه Google Services Gradle نیاز دارید.
  4. در 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 اجازه دهید وابستگی ها را نصب کند.

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

5. یک رابط وب Analytics در وب ایجاد کنید و رویدادهای سفارشی را ثبت کنید

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

در این قسمت، بیایید ببینیم کدام کد را باید در وب قرار دهید. a0f31cdf21ea85d1.png

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

6d9fac050fb64f4e.png

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

f40c1596678173ba.png

هنگامی که رویداد در نمای وب در Android فعال می شود، "window.AnalyticsWebInterface" فراخوانی می شود و رویداد را به برنامه اصلی متصل می کند.

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

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

  • در ترمینال خود، دایرکتوری وب (مثلاً cd web ) را وارد کرده و دستورات زیر را اجرا کنید:
  • npm install -g firebase-tools - با این کار Firebase CLI نصب می شود.
  • firebase login
  • firebase init
  • وقتی از شما پرسیده شد که کدام ویژگی را می خواهید تنظیم کنید، «میزبانی» را انتخاب کنید.
  • پروژه ای را که برای برنامه اندروید خود تنظیم کرده اید انتخاب کنید.
  • پیش فرض ها را برای همه اعلان های باقی مانده بپذیرید.
  • firebase deploy --only hosting - استقرار در میزبانی Firebase.

e7d56dd78a4448e7.png

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

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

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

6f069f438e4667ba.png

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

f2c6e5affd8c8993.png

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

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

اگر کد شما به خوبی کار کند، گزارشی را مانند زیر مشاهده خواهید کرد.

33c64f811e7e9a0f.png

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

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

af6e8da348dbe775.pngaa804eb02f0b7d3f.png

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

bde531c7a37c0851.png

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

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

486010186b929deb.png

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

b72cf934a76e174b.png

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

9. وارد کردن رویدادهای تجزیه و تحلیل در Google Ads

هنگامی که راه اندازی Firebase-Flutter شما کامل شد، آماده راه اندازی کمپین های برنامه با رویدادهای اکشن هستید. با پیوند دادن Firebase به Google Ads شروع کنید. با پیوند Firebase به Google Ads، کمپین های برنامه می توانند رویدادهای Firebase را وارد کنند. این فرآیند همچنین به Google Ads کمک می‌کند تا کمپین‌های برنامه را تقویت کند و به آن اجازه می‌دهد درباره مخاطبان خود اطلاعات بیشتری کسب کند.

  1. با کلیک بر روی دکمه کنار نمای کلی پروژه به تنظیمات Firebase بروید.
  2. در تب Integrations ، Google Ads و یک دکمه پیوند را مشاهده خواهید کرد. روی پیوند کلیک کنید و سپس روی ادامه کلیک کنید.

b711bf2e94fa0895.png

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

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

به Google Ads بروید.

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

73cec8d2e80eab03.png

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

4b1d8f6a712b2ac6.png

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

e2bd5e1f7b9b73d9.png

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

ab35e341dff32e48.png

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

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

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

af98c44d1476558.png

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

ee2bf8eb80cddd7c.png

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

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

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

تو یاد گرفتی

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