מעקב אחר אירועים ב-WebView באמצעות Google Analytics for Firebase

1. מבוא

העדכון האחרון: 25 בפברואר 2022

מה תפַתחו

ב-Codelab הזה נסביר איך להעביר אירועים מדף אינטרנט בתוך WebView לקוד Native, כדי ש-GA4F יוכל לעקוב אחרי האירועים.

נשתמש באפליקציית Android היברידית לדוגמה שקוראת לדף אינטרנט באמצעות WebView.

מה תלמדו

  • איך מאתחלים את GA4F ‏ (Google Analytics for Firebase) באפליקציה היברידית
  • איך יוצרים אירועים ופרמטרים מותאמים אישית בדף אינטרנט
  • איך מעבירים אירועים בדף אינטרנט ב-WebView לקוד Native
  • איך מנפים באגים
  • איך מייבאים אירועים ומשתמשים בהם בקמפיינים עם קריאה לפעולה.

מה תצטרכו

  • ‫Android Studio מגרסה 3.6 ואילך
  • חשבון Firebase

2. תהליך ההגדרה

קבלת הקוד

במדריך הרשמי של Firebase מופיע קוד לדוגמה ב-GitHub. אנחנו צריכים את זה לפרויקט הזה.

7074c0e83b5fd4b1.png

כדי להתחיל, צריך להוריד את הקוד ולפתוח אותו בסביבת הפיתוח המועדפת. נשתמש בשתי ספריות : android ו-web. הספרייה android מיועדת לאפליקציות ל-Android, והספרייה web מיועדת לדף אינטרנט שהאפליקציה תתקשר איתו דרך 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 כדי לעקוב אחרי אירועי פעולה ולנתח המרות.

d711cb170a42a355.png

מידע נוסף על פרויקטים ב-Firebase זמין במאמר הסבר על פרויקטים ב-Firebase.

4. הגדרת Firebase ל-Android

הגדרת Android במסוף Firebase

  1. בדף הבית של מסוף Firebase, לוחצים על סמל Android כמו בתמונה שלמטה. 143983fdc86ff670.png

אפשר גם לעבור אל Project Overview (סקירת הפרויקט) בסרגל הניווט הימני, וללחוץ על הלחצן Android (אנדרואיד) בקטע Get started by adding Firebase to your app (תחילת העבודה: הוספת Firebase לאפליקציה).

אחרי זה יופיע המסך 'הוספת Firebase לאפליקציית Android' כמו שמוצג למטה.

74e684bd64bd8d9d.png

  1. אפשר למצוא את שם החבילה של Android (לדוגמה, com.xxxx.myproject) ב-android/app/src/main/AndroidManifest.xml בספריית האפליקציה.
package="com.xxxx.myproject"
  1. אין צורך במפתח SHA-1. המפתח הזה נדרש רק אם רוצים להשתמש ב-התחברות באמצעות חשבון Google או ב-קישורים דינמיים ב-Firebase או לייבא נתוני רכישות מתוך האפליקציה מ-Google Play, אבל זה לא הנושא של ה-Codelab הזה.
  2. לוחצים על Register App (רישום האפליקציה).
  3. מורידים את קובץ התצורה google-services.json במסוף Firebase, ומעתיקים ומדביקים את הקובץ הזה לתיקייה android/app בפרויקט האפליקציה. a2c930b2dd517980.png
  4. במסוף Firebase, מדלגים על השלבים שנותרו וחוזרים לדף הראשי של מסוף Firebase.
  5. לבסוף, צריך את הפלאגין Google Services Gradle כדי לקרוא את הקובץ google-services.json שנוצר על ידי Firebase.
  6. ב-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 באינטרנט ורישום אירועים מותאמים אישית

כדי לעקוב אחרי האירועים ב-WebView באמצעות Google Analytics, צריך להוסיף את הקוד לאתר ולאפליקציית Android.

בקטע הזה נבדוק איזה קוד צריך להוסיף לדף האינטרנט. a0f31cdf21ea85d1.png

קודם יוצרים קובץ JavaScript לשימוש בקובץ HTML. בקוד לדוגמה, קובץ ה-js נקרא index.js. צריך ליצור את הפונקציה logEvent כדי לקרוא ל-AnayticsWebInterface ל-Android, ול-messageHander ל-iOS, כמו בקוד שבהמשך.

66a13d9290c3b2c7.png

מפעילים את הפונקציה הזו במקום שבו רוצים לעקוב אחרי האירוע בקובץ ה-HTML, כמו בדוגמה שלמטה.

1bf11ba7b8fae269.png

כשאירוע מופעל ב-WebView באפליקציית Android, הפונקציה window.AnalyticsWebInterface נקראת והיא מעבירה את האירוע לקוד WebInterface באפליקציה.

6. אירוח של ספריית אינטרנט כדי לקבל כתובת URL של דף אינטרנט

לפני שקוראים לדף אינטרנט ב-WebView באפליקציה, צריך כתובת URL של דף אינטרנט. יהיו הרבה שיטות לאירוח דפי אינטרנט. ב-codelab הזה נשתמש בשירות האירוח של Firebase רק לצורך נוחות.

  • במסוף, מזינים את ספריית האינטרנט (לדוגמה, cd webומריצים את הפקודות הבאות:
  • npm install -g firebase-tools

הפעולה הזו תתקין את Firebase CLI.

  • firebase login
  • firebase init
  • כשמתבקשים לבחור תכונה להגדרה, בוחרים באפשרות 'אירוח'.
  • בוחרים את הפרויקט שהגדרתם לאפליקציית Android.
  • מאשרים את ברירות המחדל לכל שאר ההנחיות.
  • ‫firebase deploy --only hosting – פריסה באירוח ב-Firebase.

a2c132502ffa8a04.png

  • אחרי שמקבלים את כתובת ה-URL של דף האינטרנט, עוברים לפרויקט האפליקציה ב-Android Studio ומזינים את כתובת ה-URL של האינטרנט שנוצרה בשלב הזה ב-WebView, כמו בדוגמה שלמטה.

86b44d7bf72383a7.png

7. פיתוח קוד לממשק באפליקציית Android

כדי לעקוב אחרי האירועים ב-WebView באמצעות GA4F, צריך להוסיף את הקוד גם לאתר וגם ל-Android. בקטע הזה נבדוק איזה קוד צריך להוסיף לאפליקציית Android כדי לקבל את האירועים מדף האינטרנט ב-WebView.

יוצרים את הקובץ AnalyticsWebInterface.java כדי ליצור את המחלקה AnalyticsWebInterface. במחלקה הזו, צריך לקודד @JavascriptInterface כדי לחבר את הפונקציה logEvent בקובץ ה-JS של האתר כמו בדוגמה שלמטה.

796981318ff44346.png

לאחר מכן, צריך להוסיף ממשק JavaScript בפעילות שקוראת ל-WebView, כמו בדוגמה שלמטה.

b1bd1d9bb50d418f.png

כדי לראות את הקוד המלא, אפשר לעיין בקוד לדוגמה שהורדתם מ-GitHub בשלב 'הגדרה'.

8. בדיקה וניפוי באגים של אירועים

כדי לנפות באגים באירועים, אפשר להשתמש בקוד הבא במסוף של Android Studio אחרי שמחברים את מכשיר הבדיקה או מפעילים את האמולטור.

‪> adb shell setprop debug.firebase.analytics.app [app package name]

‪> adb shell setprop log.tag.FA VERBOSE

‪> adb shell setprop log.tag.FA-SVC VERBOSE

‪> adb logcat -v time -s FA FA-SVC

לוחצים על LOG EVENT 1 באפליקציה, ואם הקוד פועל בצורה תקינה, היומן ייראה כמו בדוגמה שלמטה.

f84d06d3534ad034.png

אם רוצים לבדוק במסוף Firebase, אפשר גם להשתמש בכרטיסייה 'פעילות בזמן אמת'. עוברים אל מסוף Firebase ולוחצים על הכרטיסייה Realtime (זמן אמת) כמו בתמונה שלמטה.

לאחר מכן, מסננים את אירוע פלטפורמת Android באמצעות הפונקציה 'הוספת השוואה'.

aa804eb02f0b7d3f.png

אם הקוד שלכם מוטמע בצורה נכונה, האירועים מאפליקציית Android יופיעו בכרטיסייה 'זמן אמת'. 334afcae650c58d4.png

אחרי כמה שעות, תוכלו לראות את האירועים שנרשמו בכרטיסייה Events (אירועים) במסוף Firebase. פשוט לוחצים על הכרטיסייה Events (אירועים) בקטע Analytics במסוף Firebase. אפשר גם ללחוץ על האירוע כדי לבדוק את הערכים בתוך האירוע event1.

b72cf934a76e174b.png

כדי לייבא את event1 כהמרה ב-Google Ads, מעבירים את המתג סימון כהמרה שמאלה כדי לסמן אותו כהמרה.

486010186b929deb.png

אם האירוע מופיע בכרטיסייה 'המרה', סימן שהצלחתם לסמן את האירוע כהמרה. מערכת Google Ads תוכל עכשיו לייבא את האירוע הזה מ-Firebase.

לצורך ניפוי באגים, אפשר להשתמש ב-Firebase DebugView. פרטים נוספים זמינים במאמר בנושא ניפוי באגים באירועים.

9. ייבוא אירועים מ-Analytics אל Google Ads

אחרי שתסיימו את ההגדרה של Firebase, תוכלו להשיק את הקמפיינים לקידום האפליקציה עם אירועי פעולה. מתחילים בקישור Firebase אל Google Ads. אם מקשרים את Firebase ל-Google Ads, אפשר לייבא אירועים מ-Firebase לקמפיינים לקידום אפליקציות. התהליך הזה גם עוזר למערכת של Google Ads לשפר את הקמפיינים לקידום אפליקציות, כי הוא מאפשר לה ללמוד יותר על הקהלים שלהם.

  1. עוברים אל Firebase Settings (הגדרות Firebase) בלחיצה על הלחצן לצד Project Overview (סקירת הפרויקט).
  2. בכרטיסייה Integrations (שילובים) יופיע Google Ads ולחצן Link (קישור). לוחצים על קישור ואז על המשך.

67fc1b7f75f9dcaa.png

  1. בוחרים חשבון Google Ads.

החלק שקשור ל-Firebase הסתיים.

נכנסים אל Google Ads.

  1. מתחברים לחשבון ועוברים אל כלים והגדרות > מדידה > המרות כדי לייבא אירועים מותאמים אישית כהמרות.
  2. לוחצים על הלחצן + כדי להוסיף פעולות המרה חדשות.

1eb800ed1ae776cc.png

  1. בוחרים באפשרות נכסי Google Analytics 4 (Firebase) ולוחצים על המשך.

8b0a0b34b1d3eae2.png

  1. תוכלו לראות את כל האירועים ב-Analytics שמסומנים כהמרות. מחפשים את האירוע event1 שהטמענו קודם.

e2bd5e1f7b9b73d9.png

  1. מסמנים את הפעולה, לוחצים על ייבוא ואז על המשך.

2402f11ee4e3ed2e.png

אחרי שמגדירים את event1 כפעולת המרה, אפשר להפעיל קמפיינים לעידוד פעולות באפליקציה עם אירוע event1.

10. השקת קמפיינים לעידוד פעולות באפליקציה עם אירועים מיובאים

  1. עוברים לכרטיסייה 'קמפיין' בחשבון הנוכחי ולוחצים על הלחצן + כדי ליצור קמפיין חדש. לוחצים על [קמפיין חדש] ואז על המשך.
  2. משיקים קמפיין לקידום אפליקציה באמצעות האפשרות התקנות של אפליקציות.

eda56ea9bd38c6d5.png

  1. מחפשים את האפליקציה על ידי הקלדת השם שלה, שם החבילה או בעל האפליקציה.
  2. בקטע בידינג, בוחרים באפשרות פעולות באפליקציה בתפריט הנפתח.
  3. מחפשים את האירוע המותאם אישית ברשימה. מגדירים יעד עלות להמרה ומשלימים את האפשרויות הנוספות.

438e581eb1b40003.png

  1. משלימים את הגדרות הקמפיין.

11. מזל טוב

החשבון שלך קושר בהצלחה ל-Firebase ול-Google Ads! כך תוכלו לשפר את ביצועי הקמפיין באמצעות אירועים מיובאים מ-Firebase.

מה למדתם

  • איך מאתחלים את GA4F ‏ (Google Analytics for Firebase) באפליקציה היברידית
  • איך יוצרים אירועים ופרמטרים מותאמים אישית בדף אינטרנט
  • איך מעבירים אירועים בדף אינטרנט ב-WebView לקוד Native
  • איך מנפים באגים
  • איך מייבאים אירועים ומשתמשים בהם בקמפיינים עם קריאה לפעולה.

12. קובצי עזר

מדריך רשמי

  • שימוש ב-Analytics ב-WebView – Firebase – Google

הגדרות Firebase ו-Google Ads