تتبُّع الأحداث في WebView باستخدام "إحصاءات Google لبرنامج Firebase"

1. مقدمة

تاريخ آخر تعديل: 25/02/2022

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

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية إعادة توجيه الأحداث من صفحة ويب ضمن 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. إعدادات Firebase لنظام التشغيل Android

ضبط Android في "وحدة تحكُّم Firebase"

1. في صفحة "وحدة تحكُّم Firebase" الرئيسية، يمكنك النقر على رمز Android على النحو التالي.

أو يمكنك الانتقال إلى نظرة عامة على المشروع في شريط التنقل الأيمن، والنقر على الزر Android ضمن "البدء من خلال إضافة Firebase إلى تطبيقك"

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

2. يمكنك العثور على اسم حزمة Android (على سبيل المثال، com.xxxx.myproject) في android/app/src/main/AndroidManifest.xml في دليل التطبيقات.

package="com.xxxx.myproject"

3. لست بحاجة إلى مفتاح SHA-1 هنا. يكون هذا المفتاح مطلوبًا فقط إذا أردت استخدام ميزة تسجيل الدخول بحساب Google أو الروابط الديناميكية من Firebase أو استيراد بيانات in_app_purchase من Google Play، وهذا ليس من نطاق هذا الدرس التطبيقي حول الترميز.
4. انقر على تسجيل التطبيق.
5. نزِّل ملف الإعداد google-services.json في وحدة تحكُّم Firebase، وانسخه الصق هذا الملف في الدليل android/app في مشروع تطبيقك.
6. بالعودة إلى "وحدة تحكُّم Firebase"، تخطي الخطوات المتبقية والرجوع إلى الصفحة الرئيسية لوحدة تحكُّم Firebase.
7. أخيرًا، يجب أن يكون لديك مكوّن إضافي لخدمات Google Gradle لقراءة ملف google-services.json الذي تم إنشاؤه بواسطة Firebase.
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- تطوير واجهة ويب لخدمة "إحصاءات Google" على الويب وتسجيل الأحداث المخصّصة

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

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

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

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

عند تشغيل حدث في WebView في تطبيق Android، "window.AnalyticsWebInterface" ستتم إعادة توجيه الحدث إلى رمز WebInterface في التطبيق.

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

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

• في الوحدة الطرفية، أدخِل دليل الويب (على سبيل المثال، cd web) وشغِّل الأوامر التالية:
• npm install -g firebase-tools

سيؤدي هذا إلى تثبيت واجهة سطر الأوامر في Firebase.

• firebase login
• firebase init
• اختيار "الاستضافة" عند سؤالك عن الميزة التي تريد إعدادها.
• اختَر المشروع الذي أعددته لتطبيق Android.
• اقبل الإعدادات التلقائية لجميع الطلبات المتبقية.
• firebase deploy --only hosting: النشر على استضافة Firebase

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بعد اكتمال عملية إعداد Firebase، ستكون جاهزًا لإطلاق حملات التطبيقات التي تتضمّن أحداثًا إجرائية. ابدأ بربط 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".

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

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

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

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

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

11. تهانينا

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

لقد تعلمت

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

12. المراجع

الدليل الرسمي

• استخدام "إحصاءات Google" في WebView - Firebase - Google

Firebase و إعداد "إعلانات Google"

• "إعلانات Google" مع الأحداث المخصّصة من "إحصاءات Google لبرنامج Firebase" - نظام التشغيل Android
• إطلاق الحملات على "إعلانات Google" باستخدام الأحداث المخصّصة وFlutter في "إحصاءات Google"