אני לא יודע כמה מקוראי הפוסט עובדים עם גוגל אנליטיקס לאפליקציות, אבל אני חושב שבכל זאת כדאי לכם לקרוא את זה כי זה יכול להיות לכם מאוד שימושי לדברים אחרים, כיום או בעתיד.
אז בפוסט הקרוב אני הולך להסביר לכם איך לדבג אפליקציות, ואיך לבדוק האם האיוונטים של גוגל אנליטיקס באמת נשלחים כמו שהגדרתם אותם.
אבל קודם כל – למה צריך מדריך מיוחד?
באתרי web יש לנו את הדפדפן שמאפשר לנו לראות מה נשלח לגוגל אנליטיקס באמצעות chrome dev tools.
פשוט הולכים ללשונית ה-network, כותבים collect או google-analytics ורואים את כל מה שנשלח או לא נשלח לשרתים של גוגל:
כמובן שיש תוספים כמו Google Analytics Debugger ודומיהם שמאפשרים לנו לצפות במידע בצורה יותר נוחה, אבל באופן כללי אפשר לומר שזו לא בעיה לדבג את האיוונטים באתרי ווב.
באפליקציות לעומת זאת, אין לנו שום כלי שאפשר להלביש על האפליקציה כדי לעקוב אחרי מה שנשלח, ולכן נצטרך להשתמש בשיטה אחרת.
למה לא להשתמש בדוח real time?
נכון שבאופן עקרוני אתם יכולים להשתמש ב-real time של גוגל אנליטיקס, אבל יש לזה הרבה חסרונות:
- לפעמים אתם לא היחידים שמשתמשים באפליקציה, ואז יהיה לכם קשה לזהות את הפעולות שלכם.
- לפעמים האפליקציה כבר הושקה, ואז לכו תמצאו את עצמכם בין כל שאר הגולשים.
- הריל טיים לא מראה לכם פירוט של האיוונטים שנשלחו.
וזאת הסיבה שאני רוצה ללמד אתכם איך לעשות את זה כמו שצריך.
תכירו את צ’ארלס
כדי לדבג את האפליקציה אנחנו נשתמש בתוכנה בשם Charles, שבגדול מתווכת בין האפליקציה לבין “החלל החיצון” (-שרתים אחרים), ומאפשרת לנו לראות את כל הבקשות שנשלחות מהאפליקציה לאותם שרתים.
יצרתי איור קטן כדי להמחיש את זה: בצד ימין אתם רואים מה קורה במצב רגיל, כאשר האפליקציה שולחת איוונטים לגוגל אנליטיקס.
בצד שמאל אתם רואים מה קורה כאשר אני מחבר את Charles, שפשוט מאוד נכנסת באמצע ומשקפת לי מה נשלח לגוגל אנליטיקס, או לכל שרת אחר.
אז מה עושים בפועל?
שלב ראשון – מורידים את התוכנה מהלינק הזה.
בעקרון היא עולה 50$ לכל החיים, אבל יש 30 יום נסיון.
אני קניתי אותה ממש מזמן ועדיין משתמש בה, ככה שלדעתי זו השקעה חד פעמית מאוד משתלמת (ואני לא מרוויח פה כלום, למען הסר ספק).
לאחר שהורדתם והתקנתם, לחצו על Proxy בתפריט ואז. macOS Proxy (או Windows אם אתם משתמשים ב-PC).
זה ינתב את כל הבקשות של המחשב שלכם דרך Charles:
לאחר מכן לכו ל-Proxy > SSL Proxying Settings והוסיפו את הדומיין של גוגל אנליטיקס ותג מנג’ר לרשימה:
זה נצרך מכיוון שצ’ארלס לא מאזין לבקשות שנשלחות דרך פרוטוקול מאובטח (SSL) אלא אם כן הגדרתם לו את הדומיינים שאתם רוצים להאזין להם, ומכיוון שאיוונטים נשלחים דרך תג מנג’ר לדומיין של גוגל אנליטיקס (ושניהם מאובטחים, כמובן) – אנחנו צריכים להכניס את שניהם.
בנוסף, לכו ל-Help > SSL Proxying > Install Charles Root Certificate, ועקבו אחר הוראות ההתקנה שיוצגו לכם.
בגדול זה נצרך מכיוון שכדי להציג בקשות מוצפנות (SSL), צ’ארלס צריך להסיר את ההצפנה שלהם, ואז להצפין אותם שוב כדי לשלוח אותם לשרת הסופי.
עכשיו נעבור להגדרות של מכשיר המובייל
לחצו על Help > SSL Proxying > Install Charles Root Certificate on a Mobile Device:
יוצג לכם חלון עם מספר – השאירו אותו פתוח כמו שהוא:
עברו למכשיר הסלולרי שלכם, לחצו על ה-WiFi שאליו אתם מחוברים, ולחצו למטה על Configure Proxy:
בחרו Manual, והכניסו את ה-IP בשדה Server. במקרה שלי זה 192.168.68.107 (זה מה ש-Charles נתנו לי קודם), ובשדה Port הכניסו 8888:
עכשיו בקרו בכתובת chls.pro/ssl באמצעות דפדפן הספארי באייפון:
תוצג לכם ההודעה הבאה, לחצו על Allow:
לאחר מכן תראו הודעת אישור:
עכשיו לכו ל-Settings > General, ולמטה תראו Profile & Devices Management. לחצו על זה, ואז על Charles Proxy CA…
לחצו על Install בצד ימין של המסך, עקבו אחרי ההוראות עד שתראו שהתעודה הותקנה בהצלחה.
עכשיו לכו ל-Settings > About, וגללו למטה עד שתראו Certificate Trust Settings.
הדליקו את המתג, וזהו. פה סיימתם להגדיר את הכל!
** הערה: באנדרואיד יש עוד שלב קצת יותר מורכב, אבל אני סומך עליכם שתמצאו את ההגדרות בדוקומנטציה של charles.
עכשיו כל שנותר לעשות הוא לחזור לתוכנה Charles, ולפתוח במקביל את האפליקציה שאותה אתם רוצים לדבג.
לדוגמא
יוטיוב מכירים?
יפה. אז אמנם הם לא משתמשים בגוגל אנליטיקס (האא? כן..), אבל אפשר לראות בקלות את המידע שהם אוספים על ההתנהגות שלנו.
במקרה שלפניכם, צפיתי בסרטון כלשהוא בתצוגה המקדימה ואז לחצתי על הסרטון, ואפשר לראות את הערכים שגוגל שלחו:
muted זה האם הסרטון רץ על mute לפני שהפעלתי אותו (במקרה שלי כן).
et זו השניה שבה לחצתי על הסרטון כדי להפעיל אותו.
docid זה ה-ID של הסרטון.
וכו’ וכו’
כמובן שאתם יכולים לעשות את זה עם כל אפליקציה, ובפרט עם האפליקציה שלכם.
מה עוד אפשר לעשות עם Charles?
אתם יכולים לשמור את הפעילות שביצעתם כדי לצפות בה מאוחר יותר:
וגם לשנות את הנתיב של ה-request, למשל אם אתם רוצים לדבג את הבקשות אתם יכולים להגדיר שבמקום ללכת ל-google-analytics.com/collect (לשם נשלחות כל הבקשות של גוגל אנליטיקס), אתם רוצים שהבקשות ילכו ל-google-analytics.com/debug/collect, שזה המקום אליו שולחים את הבקשות כדי לבדוק אם הן תקינות.
לחצו בתפריט על Tools > Map Remote והגדירו מה אתם רוצים לשנות:
אתם יכולים לראות בדוגמא שהבקשה נותבה באופן אוטומטי ל-debug, והתוצאה שחזרה תקינה:
עוד שימוש נחמד מאוד –
קרה לי פעם שהמתכנת הכניס בטעות את GTM-XXXXXXX בתור ה-ID של תג מנג’ר, במקום את ה-ID האמיתי:
כפי שאתם רואים מדובר באפליקציה, ולקח זמן עד שצוות הפיתוח שינה את זה, אז לבינתיים יצרתי תנאי שמשנה את הבקשה ל-ID התקין:
סיכום
Charles היא תוכנה מעולה, ואפשר לעשות איתה המון דברים.
באופן אישי היא משמשת אותי לעשות debugging לאפליקציות, אבל אני מציע לכם לשחק איתה וללמוד אותה לעומק, כי היא באמת יכולה לשמש אתכם גם לדברים אחרים אם תהיו מספיק יצירתיים.