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

1. מבוא

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

מה תפַתחו

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

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

מה תלמדו

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

מה צריך להכין

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

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

לקבלת הקוד

מסמכי המדריך של firebase מספקים את הקוד לדוגמה שדרוש לנו לפרויקט הזה לתוך github.

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

3. יצירה והגדרה של פרויקט Firebase

כדי להתחיל בעבודה עם Firebase, עליך ליצור ולהגדיר פרויקט Firebase.

יצירת פרויקט Firebase

1. נכנסים אל Firebase.

במסוף Firebase, לוחצים על Add Project (או Create a project) ונותנים לפרויקט ב-Firebase את השם Webview-test-codelab או כל שם אחר שרוצים.

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

מידע נוסף על פרויקטים ב-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 (שימו לב: הם לא חלק מ-Codelab הזה). אם בכוונתך לייבא נתונים של in_app_purchase מ-Google Play, צריך להגדיר את המפתח בשלב מאוחר יותר.
7. לוחצים על רישום האפליקציה.
8. אם ממשיכים ב-Firebase, פועלים לפי ההוראות להורדת קובץ התצורה google-services.json.

9. עוברים לספריית האפליקציות ומעבירים את הקובץ google-services.json (שהורדתם עכשיו) לספרייה android/app.
10. חוזרים למסוף Firebase, מדלגים על השלבים הנותרים וחוזרים לדף הראשי של מסוף Firebase.
11. לבסוף, צריך את הפלאגין של Google Services Gradle כדי לקרוא את הקובץ google-services.json שנוצר על ידי Firebase.
12. בסביבת הפיתוח המשולבת או בכלי העריכה, פותחים את 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. אם האפליקציה עדיין פועלת, סוגרים את האפליקציה ויוצרים אותה מחדש כדי לאפשר לה להתקין יחסי תלות.

סיימת להגדיר את האפליקציה ל-Android!

5. פיתוח ממשק אינטרנט של Analytics באינטרנט ורישום של אירועים מותאמים אישית ביומן

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

בחלק הזה נראה איזה קוד צריך להזין באינטרנט.

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

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

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

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.

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

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

יוצרים "AnalyticsWebInterface.java" כדי להפוך את Analytics ל-"AnalyticsWebInterface" בכיתה. בכיתה הזו צריך לקודד את @JavaScriptInterface כדי לחבר את פונקציית LogEvent בקובץ ה-js של האינטרנט, כמו שמתואר בהמשך.

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

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

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

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

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

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

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

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

כדי לסמן את event1 כהמרה, מזיזים את המתג סימון כהמרה שמאלה.

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

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

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

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

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

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

אזהרה: אם אירוע היעד לא מסומן כאירוע המרה, מערכת Google Ads לא תוכל לייבא אותו. צריך לוודא שהאירוע מסומן כראוי כהמרה.

סיימתם את החלק של Firebase.

נכנסים ל-Google Ads.

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

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

4. תוכלו לראות את כל האירועים של ניתוח נתונים שמסומנים כהמרות. למצוא את האירוע event1 שהטמענו בעבר.

5. בודקים את הפעולה, לוחצים על ייבוא ואז לוחצים על המשך.

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

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

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

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

8. כדי למצוא את האפליקציה, מקלידים את שם האפליקציה, שם החבילה או בעל האפליקציה.
9. בקטע בידינג, בוחרים באפשרות פעולות בתוך האפליקציה בתפריט הנפתח.
10. מוצאים את האירוע המותאם אישית ברשימה. מגדירים יעד עלות להמרה ומשלימים אפשרויות נוספות.

11. מסיימים לקבוע את הגדרות הקמפיין.

11. מזל טוב

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

למדתם

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