تتبع الأحداث في WebView باستخدام "إحصاءات Google"

1. مقدمة

تاريخ آخر تعديل: 22-12-2021

ما ستنشئه

في هذا الدرس التطبيقي حول الترميز، ستتعلّم كيفية إعادة توجيه الأحداث من صفحة ويب داخل WebView إلى رموز برمجية أصلية حتى تتمكّن "إحصاءات Google لـ Firebase" من تتبُّع الأحداث.

سنستخدم نموذج تطبيق Android المختلط الذي يستدعي صفحة ويب باستخدام WebView.

ما ستتعلمه

• كيفية إعداد "إحصاءات Google لبرنامج Firebase"‏ (GA4F) في تطبيق مختلط
• كيفية إنشاء أحداث ومَعلمات مخصّصة في صفحة ويب
• كيفية إعادة توجيه الأحداث على صفحة ويب ضمن WebView إلى رموز برمجية أصلية
• كيفية تصحيح الأخطاء
• كيفية استيراد الأحداث واستخدامها في "حملات تحثّ على اتّخاذ إجراء"

المتطلبات

• الإصدار 3.6 من "استوديو Android" أو إصدار أحدث
• حساب Firebase

2. الإعداد

الحصول على الرمز

توفّر مستندات دليل Firebase نموذج الرمز البرمجي الذي نحتاج إليه لهذا المشروع في GitHub.

للبدء، عليك الحصول على الرمز وفتحه في بيئة التطوير المفضّلة لديك. سنستخدم دليلَين : android وweb. دليل "android" مخصّص لتطبيق Android، ودليل "web" مخصّص لصفحة ويب سيتم استدعاؤها من خلال التطبيق باستخدام WebView.

3- إنشاء مشروع Firebase وإعداده

لبدء استخدام Firebase، عليك إنشاء مشروع على Firebase وإعداده.

إنشاء مشروع Firebase

1. سجِّل الدخول إلى Firebase.

في وحدة تحكّم Firebase، انقر على "إضافة مشروع" (Add Project) أو "إنشاء مشروع" (Create a project)، ثمّ أطلِق على مشروعك في Firebase اسم Webview-test-codelab أو أي اسم آخر تريده.

2. انقر على خيارات إنشاء المشروع. اقبَل بنود Firebase إذا طُلب منك ذلك. عليك تفعيل "إحصاءات Google" لهذا المشروع، لأنّك تحتاج إلى أحداث "إحصاءات Google" لتتبُّع أحداث الإجراءات وتحليل الإحالات الناجحة.

لمزيد من المعلومات عن مشاريع Firebase، اطّلِع على مقالة التعرّف على مشاريع Firebase.

4. إعداد Firebase على Android

ضبط إعدادات 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 لأداة 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" على الويب وتسجيل الأحداث المخصّصة

لتتبُّع الأحداث في عرض ويب باستخدام "إحصاءات Google"، عليك إدراج الرمز في كلّ من الويب وتطبيق Android.

في هذا القسم، سنتعرّف على الرمز الذي عليك وضعه على الويب.

أولاً، أنشِئ ملف JavaScript لاستخدامه في ملف HTML. في الرمز النموذجي، يكون اسم ملف js هو index.js. عليك إنشاء الدالة "logEvent" لاستدعاء AnayticsWebInterface لنظام التشغيل Android، وmessageHander لنظام التشغيل iOS كما هو موضّح في الرمز البرمجي أدناه.

ويمكنك استدعاء هذه الدالة في المكان الذي تريد تتبُّع الحدث فيه، كما هو موضّح أدناه.

عندما يتم تشغيل الحدث في WebView على Android، سيتم استدعاء "window.AnalyticsWebInterface" وسيتم ربط الحدث بالتطبيق الأصلي.

6. استضافة دليل الويب للحصول على عنوان URL لصفحة الويب

قبل طلب صفحة ويب ضمن WebView في تطبيقك، يجب أن يكون لديك عنوان URL لصفحة الويب. ستتوفّر طرق عديدة لاستضافة صفحات الويب، ولكن في هذا الدرس التطبيقي حول الترميز، سنرشدك إلى استخدام خدمة استضافة Firebase لتسهيل الأمر عليك.

• في نافذة الأوامر، أدخِل دليل الويب (مثلاً cd web) ونفِّذ الأوامر التالية:
• npm install -g firebase-tools - سيؤدي ذلك إلى تثبيت Firebase CLI.
• firebase login
• firebase init
• اختَر "الاستضافة" عندما يُطلب منك تحديد الميزة التي تريد إعدادها.
• اختَر المشروع الذي أعددته لتطبيق Android.
• اقبل الإعدادات التلقائية لجميع الطلبات المتبقية.
• firebase deploy --only hosting - النشر على Firebase Hosting

7. تطوير رمز الواجهة في تطبيق Android

لتتبُّع الأحداث في Webview باستخدام "إحصاءات Google"، عليك إدراج الرمز في كلّ من الويب وAndroid. في هذا القسم، سنلقي نظرة على الرمز الذي عليك وضعه في تطبيق Android.

أنشئ ملف "AnalyticsWebInterface.java" لإنشاء فئة "AnalyticsWebInterface". في هذه الفئة، عليك ترميز ‎ @JavascriptInterface لربط الدالة logEvent في ملف js على الويب كما هو موضّح أدناه.

بعد ذلك، عليك إضافة واجهة JavaScript في النشاط الذي يستدعي WebView على النحو التالي.

للاطّلاع على الرمز الكامل، يُرجى الرجوع إلى الرمز النموذجي الذي نزّلته في خطوة "الإعداد".

8. التحقّق من الأحداث وتصحيح أخطائها

لتصحيح أخطاء الأحداث، يمكنك استخدام الرمز التالي في وحدة استوديو Android الطرفية بعد ربط الجهاز الاختباري أو تشغيل المحاكي.

‎> 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

إذا كان الرمز يعمل بشكل جيد، سيظهر لك السجلّ على النحو التالي.

إذا كنت تريد التحقّق من ذلك في وحدة تحكّم Firebase، يمكنك أيضًا استخدام علامة التبويب "الوقت الفعلي". انتقِل إلى "وحدة تحكّم Firebase" وانقر على علامة التبويب "في الوقت الفعلي" كما هو موضّح أدناه.

بعد ذلك، يمكنك فلترة حدث نظام Android الأساسي باستخدام وظيفة "إضافة مقارنة".

ستظهر لك الأحداث من تطبيق Android في علامة التبويب "الوقت الفعلي" إذا تم تنفيذ الرمز بشكلٍ صحيح.

بعد بضع ساعات، يمكنك الاطّلاع على الأحداث المسجَّلة في علامة التبويب "الأحداث" في وحدة تحكّم Firebase. ما عليك سوى النقر على علامة التبويب الأحداث من قسم "إحصاءات Google" في "وحدة تحكّم Firebase". يمكنك أيضًا التحقّق من القيم داخل الحدث event1 من خلال النقر على الحدث.

ضَع علامة event1 كإحالة ناجحة من خلال تحريك مفتاح التبديل وضع علامة كإحالة ناجحة إلى اليسار.

إذا كان الحدث في علامة التبويب "الإحالات الناجحة"، يعني ذلك أنّه تمّ تصنيف الحدث بنجاح كإحالة ناجحة. ستتمكّن "إعلانات Google" الآن من استيراد هذا الحدث من Firebase.

لأغراض تصحيح الأخطاء، استخدِم أداة DebugView في Firebase. لمزيد من التفاصيل، راجِع مقالة تصحيح خطأ حدث.

9- استيراد أحداث الإحصاءات في "إعلانات Google"

بعد اكتمال عملية إعداد Firebase-Flutter، ستكون جاهزًا لإطلاق "حملات التطبيقات" التي تتضمّن أحداث الإجراءات. ابدأ بربط Firebase بحساب "إعلانات Google". من خلال ربط Firebase بحساب "إعلانات Google"، يمكن لحملات التطبيقات استيراد أحداث Firebase. تساعد هذه العملية أيضًا "إعلانات Google" في تعزيز "حملات التطبيقات" من خلال السماح لها بالتعرّف على المزيد من المعلومات عن شرائح الجمهور.

1. انتقِل إلى إعدادات Firebase من خلال النقر على الزرّ بجانب نظرة عامة على المشروع.
2. في علامة التبويب عمليات الدمج، ستظهر إعلانات Google وزر ربط. انقر على ربط، ثمّ انقر على متابعة.

3. اختَر حسابًا على "إعلانات Google".

تنبيه: إذا لم يتم تصنيف الحدث المستهدَف على أنّه حدث إحالة ناجحة، لن تتمكّن "إعلانات Google" من استيراده. تأكَّد من وضع علامة الإحالة الناجحة على الحدث بشكلٍ صحيح.

انتهى الآن الجزء المتعلّق بـ Firebase.

انتقِل إلى إعلانات Google.

1. سجِّل الدخول، وانتقِل إلى الأدوات والإعدادات > القياس > الإحالات الناجحة لاستيراد الأحداث المخصّصة كإحالات ناجحة.
2. انقر على الزرّ + لإضافة إجراءات إحالات ناجحة جديدة.

3. اختَر مواقع "إحصاءات Google‏ 4" (Firebase) وانقر على متابعة.

4. يمكنك الاطّلاع على جميع أحداث "إحصاءات Google" التي تمّ تصنيفها كإحالات ناجحة. ابحث عن حدث event1 الذي نفّذناه سابقًا.

5. ضَع علامة في المربّع بجانب الإجراء، ثمّ انقر على استيراد، ثمّ انقر على متابعة.

بعد ضبط event1 كإجراء إحالة ناجحة، يمكنك إطلاق "حملات تحثّ على اتّخاذ إجراء" يمكنها استهداف المستخدمين الذين من المرجّح أن يبدأوا أحداث event1 أكثر من 5 مرات.

10. إطلاق "حملات تحثّ على اتّخاذ إجراء داخل التطبيق" باستخدام أحداث مستورَدة

ملاحظة مهمة: لإطلاق "حملة تطبيقات" بنجاح، عليك الحصول على تطبيق بمستوى إصدار علني في Google Play. ومع ذلك، إذا لم تكن مستعدًا للنشر بعد، يمكنك تخطّي هذه الخطوة في الوقت الحالي.

6. انتقِل إلى علامة تبويب الحملة في حسابك الحالي، وابدأ حملة جديدة بالنقر على الزر +. انقر على [حملة جديدة]، ثمّ انقر على متابعة.
7. أطلِق "حملة ترويج للتطبيق" باستخدام خيار عمليات تثبيت التطبيق.

8. ابحث عن تطبيقك عن طريق كتابة اسم التطبيق أو اسم الحزمة أو الناشر.
9. في قسم عروض الأسعار، اختَر الإجراءات داخل التطبيق من القائمة المنسدلة.
10. ابحث عن الحدث المخصّص في القائمة المتوفّرة. حدِّد سقف التكلفة المحدد لكل إجراء، وأكمِل أي خيارات إضافية.

11. أكمِل إعدادات حملتك.

11. تهانينا

تهانينا، لقد نجحت في دمج حسابك على Firebase مع حسابك على "إعلانات Google". سيساعدك ذلك في تعزيز أداء حملتك باستخدام أحداث Firebase المستورَدة.

لقد تعلّمت

• كيفية إعداد "إحصاءات Google لبرنامج Firebase"‏ (GA4F) في تطبيق مختلط
• كيفية إنشاء أحداث ومَعلمات مخصّصة في صفحة ويب
• كيفية إعادة توجيه الأحداث على صفحة ويب ضمن WebView إلى رموز برمجية أصلية
• كيفية تصحيح الأخطاء
• كيفية استيراد الأحداث واستخدامها في "حملات تحثّ على اتّخاذ إجراء"