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

1. מבוא

עדכון אחרון: 25.02.2022

מה תפַתחו

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

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

מה תלמדו

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

מה צריך להכין

  • Android Studio 3.6 ואילך
  • חשבון Firebase

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

לקבלת הקוד

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

7074c0e83b5fd4b1.png

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

לחלופין, אפשר לעבור אל סקירה כללית של הפרויקט בסרגל הניווט הימני וללחוץ על הלחצן Android בקטע 'תחילת העבודה על ידי הוספת 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, או לייבא נתוני in_app_purchase מ-Google Play שלא נכללים ב-Codelab הזה.
  2. לוחצים על רישום האפליקציה.
  3. מורידים את קובץ התצורה google-services.json במסוף Firebase, ומעתיקים מדביקים את הקובץ בספרייה android/app בפרויקט של האפליקציה. a2c930b2dd517980.png
  4. חוזרים למסוף Firebase, מדלגים על השלבים הנותרים וחוזרים לדף הראשי של מסוף Firebase.
  5. לסיום, צריך את הפלאגין של Google Services Gradle כדי לקרוא את קובץ google-services.json שנוצר על ידי Firebase
  6. בסביבת הפיתוח המשולבת או בכלי העריכה, פותחים את 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. אם האפליקציה עדיין פועלת, סוגרים את האפליקציה ויוצרים אותה מחדש כדי לאפשר לה להתקין יחסי תלות.

סיימת להגדיר את האפליקציה ל-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

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

  • 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" כדי להפוך את Analytics ל-"AnalyticsWebInterface" בכיתה. בכיתה הזו צריך לקודד את @JavaScriptInterface כדי לחבר את פונקציית LogEvent בקובץ ה-js של האינטרנט, כמו שמתואר בהמשך.

796981318ff44346.png

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

b1bd1d9bb50d418f.png

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

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

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

> adb Shell setpro debug.firebase.analytics.app [שם חבילת האפליקציה]

> adb Shell setPRO Log.tag.FA VerBOSE

> adb Shell setPRO Log.tag.FA-SVC VBOSE

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

לוחצים על 'רישום אירוע 1' באפליקציה, ואם הקוד פועל כמו שצריך, יוצג היומן כמו בדוגמה הבאה.

f84d06d3534ad034.png

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

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

aa804eb02f0b7d3f.png

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

בעוד כמה שעות תוכלו לראות את האירועים המתועדים בכרטיסייה 'אירועים' במסוף Firebase. לוחצים על הכרטיסייה אירועים בקטע 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 על ידי לחיצה על הלחצן לצד סקירה כללית של הפרויקט.
  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. תוכלו לראות את כל האירועים של ניתוח נתונים שמסומנים כהמרות. למצוא את האירוע 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 לקוד נייטיב
  • איך לנפות באגים
  • איך מייבאים אירועים ומשתמשים בהם בקמפיינים עם קריאה לפעולה.

12. קובצי עזר

המדריך הרשמי

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

Firebase ו- הגדרות Google Ads