۱. مقدمه
آخرین بهروزرسانی: 2021-12-22
آنچه خواهید ساخت
در این آزمایشگاه کد، شما یاد خواهید گرفت که چگونه رویدادها را از یک صفحه وب در WebView به یک کد بومی ارسال کنید تا GA4F بتواند رویدادها را ردیابی کند.
ما از یک برنامه اندروید نمونه Hybrid استفاده خواهیم کرد که یک صفحه وب را با استفاده از WebView فراخوانی میکند.
آنچه یاد خواهید گرفت
- نحوه مقداردهی اولیه GA4F (گوگل آنالیتیکس برای فایربیس) در برنامه Hybrid
- نحوه ایجاد رویدادها و پارامترهای سفارشی در صفحه وب
- نحوه ارسال رویدادهای یک صفحه وب در WebView به کد بومی
- نحوه اشکال زدایی
- نحوه وارد کردن رویدادها و استفاده از آنها برای کمپینهای اکشن.
آنچه نیاز دارید
- اندروید استودیو ۳.۶ یا بالاتر
- حساب فایربیس
۲. راهاندازی
کد را دریافت کنید
مستندات راهنمای فایربیس، نمونه کدی که برای این پروژه نیاز داریم را در گیتهاب ارائه میدهند.
برای شروع، باید کد را دریافت کرده و آن را در محیط توسعه مورد علاقه خود باز کنید. ما از دو دایرکتوری استفاده خواهیم کرد: android و web. دایرکتوری "android" برای برنامه اندروید و دایرکتوری "web" برای یک صفحه وب است که توسط برنامه از طریق WebView فراخوانی میشود.
۳. ایجاد و راهاندازی یک پروژه Firebase
برای شروع کار با Firebase، باید یک پروژه Firebase ایجاد و راهاندازی کنید.
ایجاد یک پروژه فایربیس
- وارد فایربیس شوید.
در کنسول Firebase، روی افزودن پروژه (یا ایجاد یک پروژه) کلیک کنید و نام پروژه Firebase خود را Webview-test-codelab یا هر نام دیگری که دوست دارید، قرار دهید.
- روی گزینههای ایجاد پروژه کلیک کنید. در صورت درخواست، شرایط Firebase را بپذیرید. شما باید Google Analytics را برای این پروژه فعال کنید، زیرا برای ردیابی رویدادهای عملی و تجزیه و تحلیل تبدیلها به رویدادهای Google Analytics نیاز دارید.
برای کسب اطلاعات بیشتر در مورد پروژههای فایربیس، به بخش «درک پروژههای فایربیس» مراجعه کنید.
۴. پیکربندی اندروید فایربیس
پیکربندی اندروید
- در کنسول فایربیس، در منوی سمت چپ، گزینهی «نمای کلی پروژه» را انتخاب کنید، سپس روی دکمهی اندروید در زیر بخش «شروع با افزودن فایربیس به برنامهی خود» کلیک کنید.
کادر محاورهای نشان داده شده در صفحه زیر را مشاهده خواهید کرد.
- مقدار مهمی که باید ارائه دهید، نام بسته اندروید است که با استفاده از مرحله زیر به دست خواهید آورد.
- در دایرکتوری برنامه خود، فایل
android/app/src/main/AndroidManifest.xmlرا باز کنید. - در عنصر
manifest، مقدار رشتهایِ ویژگیِpackageرا پیدا کنید. این مقدار، نام پکیج اندروید است (چیزی شبیهcom.yourcompany.yourproject). این مقدار را کپی کنید. - در پنجرهی فایربیس، نام بستهی کپیشده را در فیلد
Android package nameجایگذاری کنید. - ما در اینجا به کلید SHA-1 نیازی نداریم، مگر اینکه قصد داشته باشید از Google Sign In یا Firebase Dynamic Links استفاده کنید (توجه داشته باشید که این موارد بخشی از این codelab نیستند). اگر قصد دارید دادههای
in_app_purchaseرا از Google Play وارد کنید، باید کلید را بعداً تنظیم کنید. - روی ثبت برنامه کلیک کنید.
- در ادامه در Firebase، دستورالعملها را برای دانلود فایل پیکربندی
google-services.jsonدنبال کنید.
- به پوشه app خود بروید، سپس فایل
google-services.json(که تازه دانلود کردهاید) را به پوشهandroid/appمنتقل کنید. - به کنسول Firebase برگردید، مراحل باقی مانده را رد کنید و به صفحه اصلی کنسول Firebase برگردید.
- در نهایت، برای خواندن فایل
google-services.jsonکه توسط Firebase تولید شده است، به افزونه Google Services Gradle نیاز دارید. - در 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 بتواند وابستگیها را نصب کند.
پیکربندی برنامهتان برای اندروید تمام شد!
۵. یک رابط وب تحلیلی در وب ایجاد کنید و رویدادهای سفارشی را ثبت کنید
برای ردیابی رویدادها در یک نمای وب با گوگل آنالیتیکس، باید کد را هم در برنامه وب و هم در برنامه اندروید وارد کنید.
در این بخش، بیایید بررسی کنیم که کدام کد را باید در وب قرار دهید. 
ابتدا، یک فایل جاوا اسکریپت برای استفاده در فایل html ایجاد کنید. در کد نمونه، فایل js با نام index.js وجود دارد. شما باید تابع "logEvent" را برای فراخوانی AnayticsWebInterface برای اندروید و messageHander برای iOS مانند کد زیر ایجاد کنید.
و این تابع را در جایی که میخواهید رویداد را پیگیری کنید، مانند زیر فراخوانی کنید.
وقتی رویداد در وبویو در اندروید فعال میشود، "window.AnalyticsWebInterface" فراخوانی میشود و رویداد را به برنامه بومی متصل میکند.
۶. دایرکتوری وب میزبان برای دریافت آدرس صفحه وب
قبل از اینکه یک صفحه وب را در WebView در برنامه خود فراخوانی کنید، به یک آدرس اینترنتی (url) صفحه وب نیاز دارید. روشهای زیادی برای میزبانی صفحات وب وجود دارد، اما در این آزمایشگاه کد، ما شما را راهنمایی میکنیم که از سرویس میزبانی فایربیس فقط برای راحتی استفاده کنید.
- در ترمینال خود، وارد دایرکتوری وب شوید (مثلاً
cd web) و دستورات زیر را اجرا کنید: -
npm install -g firebase-tools- این دستور رابط خط فرمان فایربیس را نصب خواهد کرد. -
firebase login -
firebase init - وقتی از شما پرسیده شد که میخواهید کدام ویژگی را تنظیم کنید، «میزبانی» را انتخاب کنید.
- پروژهای را که برای برنامه اندروید خود تنظیم کردهاید، انتخاب کنید.
- برای همه درخواستهای باقیمانده، پیشفرضها را بپذیرید.
-
firebase deploy --only hosting- به میزبانی فایربیس مستقر میشود.
۷. توسعه کد رابط کاربری در اپلیکیشن اندروید
برای ردیابی رویدادها در یک نمای وب با گوگل آنالیتیکس، باید کد را هم در وب و هم در اندروید وارد کنید. در این بخش، بیایید ببینیم کدام کد را باید در برنامه اندروید قرار دهید.
برای ایجاد کلاس "AnalyticsWebInterface" فایل "AnalyticsWebInterface.java" را ایجاد کنید. در این کلاس، باید @JavascriptInterface را برای اتصال تابع logEvent در فایل web js مانند زیر کدنویسی کنید.
در مرحله بعد، باید رابط جاوا اسکریپت را در Activity اضافه کنید که webview را مانند زیر فراخوانی میکند.
برای مشاهدهی کل کد مربوط به آن، لطفاً به نمونه کدی که در مرحلهی «راهاندازی» دانلود کردهاید، مراجعه کنید.
۸. بررسی و اشکالزدایی رویدادها
برای اشکالزدایی رویدادها، میتوانید پس از اتصال دستگاه آزمایشی یا راهاندازی شبیهساز، از کد زیر در ترمینال اندروید استودیو استفاده کنید.
> 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
اگر کد شما به خوبی کار کند، گزارش عملکرد را مانند زیر مشاهده خواهید کرد.
اگر میخواهید در کنسول Firebase بررسی کنید، میتوانید از تب Realtime نیز استفاده کنید. به کنسول Firebase بروید و مانند تصویر زیر روی تب Realtime کلیک کنید.
سپس، با استفاده از تابع "افزودن مقایسه"، رویداد پلتفرم اندروید را فیلتر کنید.
اگر کد شما به درستی پیادهسازی شده باشد، رویدادهای برنامه اندروید را در تب Realtime مشاهده خواهید کرد.
چند ساعت دیگر، میتوانید رویدادهای ثبتشده خود را در تب رویدادها در کنسول Firebase مشاهده کنید. کافیست روی تب رویدادها از بخش تجزیه و تحلیل موجود در کنسول Firebase کلیک کنید. همچنین میتوانید مقادیر داخل رویداد event1 را تنها با کلیک روی رویداد بررسی کنید.
با کشیدن دکمهی «علامتگذاری به عنوان تبدیل» به سمت راست، event1 را به عنوان یک تبدیل علامتگذاری کنید.
اگر رویداد در تب Conversion باشد، شما با موفقیت آن را به عنوان یک تبدیل علامتگذاری کردهاید. اکنون گوگل ادز میتواند این رویداد را از Firebase وارد کند.
برای اشکالزدایی، از Firebase DebugView استفاده کنید. برای جزئیات بیشتر، به رویداد اشکالزدایی مراجعه کنید.
۹. وارد کردن رویدادهای تحلیلی در گوگل ادز
پس از اتمام راهاندازی Firebase-Flutter، آماده راهاندازی کمپینهای اپلیکیشن با رویدادهای اکشن هستید. با پیوند دادن Firebase به Google Ads شروع کنید. با پیوند دادن Firebase به Google Ads، کمپینهای اپلیکیشن میتوانند رویدادهای Firebase را وارد کنند. این فرآیند همچنین به Google Ads کمک میکند تا با فراهم کردن امکان کسب اطلاعات بیشتر در مورد مخاطبان، کمپینهای اپلیکیشن را تقویت کند.
- با کلیک روی دکمه کنار نمای کلی پروژه ، به تنظیمات فایربیس بروید.
- در تب Integrations ، گوگل ادز و دکمهی لینک را خواهید دید. روی لینک کلیک کنید و سپس روی ادامه کلیک کنید.
- حساب کاربری گوگل ادز را انتخاب کنید.
حالا بخش Firebase تمام شده است.
به بخش تبلیغات گوگل بروید.
- وارد شوید و برای وارد کردن رویدادهای سفارشی به عنوان تبدیل، به ابزارها و تنظیمات > اندازهگیری > تبدیلها بروید.
- برای افزودن اقدامات تبدیل جدید، روی دکمه + کلیک کنید.
- ویژگیهای Google Analytics 4 (Firebase) را انتخاب کنید و روی ادامه کلیک کنید.
- میتوانید تمام رویدادهای تحلیلی که به عنوان تبدیل علامتگذاری شدهاند را مشاهده کنید. رویداد
event1را که قبلاً پیادهسازی کردیم، پیدا کنید.
- عملکرد را بررسی کنید، روی وارد کردن کلیک کنید و سپس روی ادامه کلیک کنید.
پس از تنظیم event1 به عنوان یک اقدام تبدیل، میتوانید کمپینهای عملی راهاندازی کنید که میتوانند کاربرانی را هدف قرار دهند که احتمالاً رویدادهای event1 را بیش از ۵ بار اجرا میکنند.
۱۰. راهاندازی کمپینهای اکشن اپلیکیشن با رویدادهای وارد شده
- به برگه کمپین حساب فعلی خود بروید و با کلیک بر روی دکمه + ، یک کمپین جدید شروع کنید. روی [کمپین جدید] کلیک کنید و سپس روی ادامه کلیک کنید.
- با گزینه نصب اپلیکیشن، یک کمپین تبلیغاتی اپلیکیشن راهاندازی کنید.
- با تایپ نام برنامه، نام بسته یا ناشر، برنامه خود را پیدا کنید.
- در بخش پیشنهاد قیمت ، از منوی کشویی، گزینه «اقدامات درون برنامهای» را انتخاب کنید.
- رویداد سفارشی خود را در لیست ارائه شده پیدا کنید. هزینه هدف برای هر اقدام را تعیین کنید و گزینههای اضافی را تکمیل کنید.
- تنظیمات کمپین خود را تکمیل کنید.
۱۱. تبریک
تبریک میگویم، شما با موفقیت Firebase و Google Ads خود را ادغام کردید! این به شما کمک میکند تا عملکرد کمپین خود را با رویدادهای وارد شده در Firebase افزایش دهید.
یاد گرفتی.
- نحوه مقداردهی اولیه GA4F (گوگل آنالیتیکس برای فایربیس) در برنامه Hybrid
- نحوه ایجاد رویدادها و پارامترهای سفارشی در صفحه وب
- نحوه ارسال رویدادهای یک صفحه وب در WebView به کد بومی
- نحوه اشکال زدایی
- نحوه وارد کردن رویدادها و استفاده از آنها برای کمپینهای اکشن.