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

1. مقدمة

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

ما الذي ستنشئه

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

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

المعلومات التي ستطّلع عليها

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

المتطلبات

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

2. بدء الإعداد

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

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

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

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

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

إنشاء مشروع على Firebase

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

في وحدة تحكُّم Firebase، انقر على "إضافة مشروع" (أو إنشاء مشروع)، وأدخِل اسمًا لمشروع Firebase باسم Webview-test-codelab أو أي اسم تريده.

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

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

4. إعداد Android Firebase

ضبط 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. وأخيرًا، تحتاج إلى مكوِّن Gradle الإضافي لخدمات Google لقراءة ملف 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" على الويب وتسجيل الأحداث المخصّصة

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

في هذا الجزء، لنلقِ نظرة على الرمز الذي يجب وضعه في الويب.

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

واستدعِ هذه الدالة حيث تريد تتبع الحدث كما هو موضح أدناه.

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

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

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

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

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

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

إنشاء "AnalyticsWebInterface.java" لإنشاء "AnalyticsWebInterface" الصف. في هذه الفئة، تحتاج إلى ترميز @JavascriptInterface لربط دالة LogEvent في ملف js على الويب على النحو التالي.

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

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

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

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

> adb shell set تؤدي inbug.firebase.analytics.app [اسم حزمة التطبيق]

> adb Shell setbro log.tag.FA VERBOSE (مطوَّل)

> adb shell setbro log.tag.FA-SVC VERBOSE

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

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

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

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

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

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

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

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

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

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. يمكنك الاطّلاع على جميع أحداث الإحصاءات التي تمّ وضع علامة "إحالة ناجحة" عليها. ابحث عن حدث event1 الذي سبق أن نفّذناه.

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

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

10. إطلاق حملات التطبيقات الإجرائية مع الأحداث التي تم استيرادها

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

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

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

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

11. تهانينا

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

لقد تعلمت

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