הטמעת גוגל אנליטיקס באתרי AMP באמצעות גוגל תג מנג’ר

בפוסט הקרוב אראה לכם איך להטמיע את גוגל אנליטיקס באתרי AMP באמצעות Google Tag Manager.

לפני שאנחנו מתחילים, אלו ראשי הפרקים עליהם אנחנו הולכים לדבר:

1. מה זה AMP?
2. הוספת AMP באתרי וורדפרס
3. גוגל אנליטיקס לאתרי AMP
4. הטמעת AMP Analytics באמצעות גוגל תג מנג’ר

חלק ראשון – מה זה בכלל AMP?

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

AMP הוא פרוייקט קוד פתוח ביוזמת גוגל, שמטרתו המקורית היתה להאיץ את הטעינה של אתרי חדשות במובייל.

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

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

אז נכון, אתרים “מותאמים” ו/או רספונסיביים אלו מושגים שנמאס לנו כבר לשמוע עליהם, אבל הם לא פותרים את הפקטור הכי משמעותי באתרי מובייל – מהירות טעינה.

המהירות משפיעה על חווית המשתמש באופן קריטי, ומחקר של KISSmetrics מצא ש-40% מהאנשים יעזבו את האתר אם זמן הטעינה שלו גבוה מ-3 שניות.

אם זה לא מפחיד אתכם, אז מחקר נוסף מצא שכל שניית עיכוב בטעינת האתר שלכם תוריד את אחוז ההמרה ב-3.5%.

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

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

מה מרכיב בעצם את ה-AMP?

ה-AMP מורכב משלושה אלמנטים עיקריים:

1. AMP HTML – אוסף של תגים מיוחדים והרבה מאוד הגבלות (וגם כמה הרחבות כדי לאפשר תוכן עשיר). כך למשל התגית <img> מוחלפת בתגית <amp-img> שמאפשרת לאתר לטעון את התמונה רק כאשר היוזר מגיע אליה ולא ישר בתחילת הטעינה של העמוד (מה שפוגע בחווית המשתמש).

2. AMP JS – תגים ספציפים שמותרים לשימוש באתרי AMP, כאשר אחת המטרות המשמעותיות של ה-AMP JS היא להפוך את כל מה שמכיל ג’אווה סקריפט לא-סינכרוני, כלומר כזה שנטען במקביל ליתר האלמנטים בעמוד ולכן גם לא מעכב את הטעינה שלהם ולא פוגע בחווית המשתמש.

3. Google AMP Cache – פרוקסי של גוגל ששומר אצלו את הדפים ומציג אותם למשתמש בצורה מיטבית, וכמובן גם מהירה יותר.

אז אחרי ההקדמה הזו בואו נתחיל:

חלק שני: הוספת AMP באתרי וורדפרס

התקינו את הפלאגין AMP של Automattic מהלינק הבא: https://wordpress.org/plugins/amp

לא קשור לאנליטיקס, אבל מכיוון שה-AMP יוצר גרסא רזה של האתר שלכם, סביר להניח שחלק מהעיצוב לא ימצא חן בעיניכם ותרצו לשחק קצת עם ה-CSS. כדי לעשות את זה השתמשו בהוק לוורדפרס מסוג action כפי שמוסבר כאן.

זהו בגדול. מעכשיו הפלאגין ייצור גרסת AMP לכל פוסט או עמוד שיש לכם באתר, וכדי לראות את זה פשוט הוסיפו את המילה /amp/ אחרי ה-URL הרגיל של הפוסט (אם זה לא עובד נסו להוסיף /?amp=1).

האם זה לא תוכן כפול?

לא, כי הפלאגין מוסיף לעמודי ה-AMP תגית קנוניקל שמובילה לתוכן המקורי.

ואיך גוגל ידע לאנדקס את הדפים של ה-AMP?

הפלאגין מוסיף תגית מיוחדת עם rel=”amphtml” שמובילה לגרסת ה-AMP של העמוד שלכם, וכאשר הזחלן של גוגל יגיע לעמוד המקורי הוא יראה שקיימת עבורו גרסת AMP.

חלק שלישי: גוגל אנליטיקס באתרי AMP

לפני שאנחנו מגיעים לתג מנג’ר, למה בכלל צריך להטמיע גוגל אנליטיקס מיוחד לאתרי AMP? למה אי אפשר להכניס אותם תחת ה-property הרגיל של האתר שלנו?

זו שאלה מצוינת, וההסבר שלה פשוט – מכיוון שכל הרעיון של AMP זה להאיץ את עמודי המובייל, ומכיוון ש-JavaScript יכול הרבה פעמים להאט את טעינת העמוד באופן משמעותי (במיוחד אם הוא נטען באופן סנכרוני), טכנולוגיית ה-AMP לא מאפשרת לכם סתם להטמיע JS בעמוד, אלא מחייבת אתכם להשתמש בתגית מיוחדת שנבדקה על ידי צוות המתכנתים ואושרה מראש.

הצוות של AMP יצר תגית עבור מערכות האנליטיקס השונות, כאשר בתוך type צריך להכניס את ה-vendor הרצוי (שכאמור נבדק ואושר מראש):

בין המערכות המובילות שכבר נמצאות ב-AMP ניתן למצוא את Adobe, Segments, Chartbeat, Yandex וכמובן את גוגל אנליטיקס.

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

האם לפצל לשני פרופרטיז או למדוד הכל תחת פרופרטי אחד?

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

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

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

חלק רביעי: הטמעת AMP Analytics באמצעות גוגל תג מנג’ר

עכשיו הגענו לחלק המעניין.

קודם כל עלינו לפתוח קונטיינר מיוחד לאתר ה-AMP שלנו.

כן כן שמעתם נכון, אי אפשר להשתמש בקונטיינר הרגיל כי כמו שכתבתי קודם ה-AMP רוצה להאיץ את האתר שלנו, ולכן עושה שימוש בג’אווה סקריפט שבנוי באופן מאוד ספציפי ולא דומה ל-JS שמרכיב את הקונטיינר הרגיל.

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

נפתח קונטיינר חדש, נבחר AMP ונקבל את הקוד להטמעה:

לפני שאנחנו מתקדמים נא וודאו שאתם משתמשים בתבנית child כי אנחנו הולכים לשנות את הקובץ function.php של התבנית, ואם וכאשר תחליטו לשדרג את התבנית – הקובץ הזה ידרס ואתם תמצאו את עצמכם בלי מעקב.

אפשרות נוספת היא לעשות את זה באמצעות פלאגין (כמו זה למשל), אבל מכיוון שהשילוב Google Tag Manager <> AMP הוא חדש דנדש – אין עדיין פלאגין שמאפשר לעשות את זה בלי להתלכלך עם הקוד (נכון לזמן כתיבת שורות אלו).

בכל מקרה אני תמיד אוהב לעשות דברים hard coded כי זה מאפשר לי לשלוט בעניינים, וגם כי יש לי אמונה (טפלה?) שכמה שיותר פלאגינים על האתר ככה הוא יהיה יותר כבד ומגושם.

אחרי הכל AMP נועד כדי להאיץ את האתר, ולכן לא נרצה להאט אותו באמצעות פלאגינים מיותרים…

אז לאחר שיצרתם תבנית child, קחו את החלק הראשון של הקוד, והטמיעו אותו באופן הבא בקובץ function.php:

 לאחר מכן קחו את החלק השני של הקוד, והטמיעו אותו באופן הבא:

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

זהו זה. התג מנג’ר עכשיו מוטמע אצלנו באתר. עכשיו בואו נראה איך מקנפגים אותו.

בגדול התג מנג’ר ל-AMP מכיל טריגרים ו-variables מגניבים שלא קיימים בילטאין בתג מנג’ר הרגיל, אבל לפני שאנחנו מגיעים אליהם בואו ניצור את התג הראשון שלנו – גוגל אנליטיקס.

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

עכשיו בואו נלך לחלקים היותר מעניינים:

Variables בתג מנג’ר ל-AMP

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

Page URL מחזיר את הכתובת של העמוד, Data Layer Variable מחזיר ערכים מתוך הדטאלייר, ועוד ועוד.

בתג מנג’ר הרגיל נוכל למצוא built-in variables כמו Page URL, Page Hostname, Event, Click Classes, Click ID, Click URL, Form Classes, Form ID וכו’ (לינק לרשימה המלאה)

כמו כן נוכל ליצור variables נוספים באופן ידני:

 

בגוגל תג מנג’ר לאתרי AMP לעומת זאת, ניתן למצוא ערכים מעניינים ואפילו מגניבים, כמו אזור הזמן של הגולש, רוחב/גובה המסך, כמות הפיקסלים שהגולש גלל מלמעלה, Total Engaged Time (מספר השניות שהגולש היה פעיל בדף), זמן טעינה של העמוד ועוד (לינק לרשימה המלאה).

כל ה-variables הללו זמינים לשימוש באופן אוטומטי, וכל שנשאר לנו לעשות זה להכניס אותם לתוך התגים כפי שנראה בהמשך.

טריגרים בתג מנג’ר ל-AMP

בתג מנג’ר לאתרי web יש לנו טריגרים שיכולים לעקוב אחרי צפיה בדף, קליק על אלמנט כלשהוא, שליחת טופס ו-event מותאם אישית שנשלח לדטאלייר (יש עוד כמה אבל אלו העיקריים).

בקונטיינר של ה-AMP נוכל למצוא טריגרים טיפה שונים, ומעניין לראות שגוגל הכניסו מעקב אחרי גלילה ו-visibility באופן מובנה:

 

יצירת איוונט בתג מנג’ר ל-AMP

את הטריגר מסוג Page View ראינו בפעולה על התג של אנליטיקס. בואו נדגים את מעקב הגלילה, ונשלח איוונט לגוגל אנליטיקס כאשר הגולש מגיע ל-25% ,50% ו-100% מהעמוד שלנו.

כל שעליכם לעשות זה ליצור תג חדש מסוג Universal Analytics, להכניס את המספר של הפרופרטי (UA-XXXXXXX-Y או באמצעות variable מסוג constant שיצרנו קודם ומכיל את המספר), ולהכניס את הערכים הרצויים תחת Category/Action/Label/Value.

במקרה שלי הכנסתי ערך קבוע “Scroll” תחת הקטגוריה, ואילו תחת Action הכנסתי את ה-variable בשם {{Scroll Top}} שמחזיר בכל פעם את מספר הפיקסלים שהגולש גלל מראש העמוד. תחת Label הכנסתי {{Scroll Height}} שיחזיר את הגובה של העמוד בפיקסלים (שניהם variables מובנים במערכת):

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

עכשיו ככה. בדרך כלל אני נוהג לעשות דיבאגינג לאיוונטים באמצעות Google Analytics Debugger, אבל הוא (עדיין) לא תומך באיוונטים שנשלחים באתרי AMP.

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

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

מעקב אחרי קליקים בעמודי AMP באמצעות גוגל תג מנג’ר

מעקב גלילה זה נחמד, אבל בואו נראה איך אני עוקב אחרי גולשים שיוצאים מעמוד ה-AMP שלי בגלל לחיצה על Leave a Comment. לכאורה הם באמת יצאו מהאתר, אבל אני רוצה לדעת אם הם באמת יצאו מהאתר או שהם פשוט עברו לאתר המובייל הרגיל, שנמדד תחת פרופרטי שונה מהפרופרטי של ה-AMP ולכן מבצע קטיעה של הסשן.

גם זה פשוט מאוד לביצוע. כל שעלי לעשות זה ליצור תג חדש מסוג Event של Universal Analytics, אבל הפעם אני אשתמש במשתנה מובנה חדש בשם {{Total Engaged Time}}. הוא יתן לי את מספר השניות שהיוזר היה פעיל בעמוד, וזה יתן לי אינדיקציה לגבי הזמן שלוקח לגולש לקרוא את המאמר ולהגיב.

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

הטריגר של התג הזה צריך להיות מסוג Click, ולאחר שאבחר אותו אוכל להכניס את הסלקטור של האלמנט אחריו אני רוצה לעקוב. במקרה שלי זהו class בשם “amp-wp-comments-link”.

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

חשוב: מכיוון שה-AMP משנה את מבנה העמוד שלכם לחלוטין, שימו לב שהסלקטורים בהם נרצה להשתמש הם שונים לגמרי מהסלקטורים שאתם מכירים מהאתר הרגיל שלכם. 

בואו נדבג את זה – נלחץ על הכפתור ונראה האם האיוונט נשלח:

אכן כן, הוא נשלח אבל יש באג קטן כי אם תשימו לב מה שמופיע תחת event label זה הדומיין הראשי ללא ה-path למרות שביקשתי ממנו לשלוח את ה-URL המלא. אני מברר כרגע מול גוגל למה זה קורה ואעדכן את הפוסט לאחר שתהיה לי תשובה.

סיכום

בניגוד למה ש(אולי) חשבתם בהתחלה, הטמעה של גוגל אנליטיקס דרך התג מנג’ר באתרי AMP (ובכלל שימוש בתג מנג’ר באתרי AMP) הם הרבה יותר פשוטים מהתג מנג’ר לאתרי web רגילים.

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

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

צריכים עזרה בהטמעה? פנו אלינו ונשמח לעזור!