Google Optimize – המדריך לטסט הראשון

לאחר פרידה כואבת מכלי ה-A/B testing המיתולוגי של גוגל Website Optimizer, היורש Content Experiments לא הצליח לסחוף אחריו את קהל המשתמשים כך מסתמן. כעת מגיע ניסיון שלישי של גוגל לכבוש את ליבם של אנשי הדיגיטל בעולם ועל הדרך לגבות מחיר כבד למתחרות בתחום הטסטים כמו Visual Website Optimizer ו-Optimizely.

Google Optimize זהה מאד למתחרותיה, גם כאן המשתמש יוצר וריאציות לטסטים על גבי ממשק ידידותי (WYSIWYG) המאפשר לו לשנות עיצובים ולעשות מניפולציות על אלמנטים כאוות נפשו. עם זאת יש הבדל אחד קטן שגורם להן לישון פחות טוב בלילה: זה חינם, אבל יש מגבלות – stay tuned.

מגבלות המהדורה החינמית

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

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

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

הכלי מותאם לדפדפן כרום ועובד על התשתית של Universal Analytics.

מדריך Google Optimize

פתיחת חשבון Google Optimize חדש

הירככיית החשבונות ב-Google Optimize זהה לזו של תג מנג’ר וגוגל אנליטיקס: יש Account שמייצג חברה ולתוכו מכניסים Container שמייצג את הפרוייקט ומכיל את כל הטסטים של אותו פרוייקט. במהדורה החינמית אתם כאמור רשאים לפתוח חשבון אחד שבתוכו יהיה Container אחד.

תחילה תקבלו מוצר ריק ללא חשבונות ותתבקשו לפתוח אחד חדש:

הזינו שם לחשבון. אם אתם רוצים לפרגן לגוגל תאפשרו להם לקבל נתונים מהחשבון שלכם בכך שלא תסירו את הצ’קבוקסים מתחת:

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

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

חיבור לגוגל אנליטיקס

את תהליך ה-Onboarding של Optimize ילווה אתכם מדריך “שלב אחר שלב” ב-Sidebar שיגיד לכם מה אתם צריכים לעשות כדי לעלות את הטסט הראשון שלכם. אנחנו כאמור נלך לפי הוראות אלה ונקשר את Optimize לגוגל אנליטיקס ע”י הקלקה על Link Property:

לאחר ההקלקה תתבקשו לבחור פרופרטי של גוגל אנליטיקס ו-View. שימו לב, זוהי בחירה שאתם רשאים לעשות פעם אחת לקונטיינר, טעיתם בבחירה? תאלצו למחוק את הקונטיינר ולהתחיל מההתחלה.

הטמעת Optimize עם גוגל תג מנג’ר

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

בכדי להטמיע את Optimize באמצעות גוגל תג מנג’ר עלינו ראשית להעתיק מרכיב אחד ממסך זה – את ה-ID של הקונטיינר של Opitimze. לחיצה על Next אגב תוביל אתכם לקוד ה-Page Hiding שעליו עוד נדון בהמשך. שימרו על חלון זה פתוח שתוכלו לחזור לכאן בהמשך.

תגית גוגל Optimize בתג מנג’ר

בתג מנג’ר נפתח תגית חדשה מסוג Google Optimize ונקבע את ההגדרות הבאות:

  • ניתן את ה-UA של גוגל אנליטיקס
  • נדביק את ה-ID של הקונטיינר של Optimize

גוגל מדגישים לבצע תיאום בהגדרות (Fields to Set) בין התגית של גוגל אנליטיקס לזו של Optimize ולכן אני מגדיר גם cookieDomain: auto. נהוג לבצע הגדרה זו כדי שהעוגיה של אנליטיקס תשב ב-TLD ולא בסאב דומיין.

עידכון: תגית גוגל אנליטיקס בתג מנג’ר

מאחר ונתוני הטסט מבוססים על תשתית המעקב של גוגל אנליטיקס עלינו ליצור סינכרון בין השתיים. ניגש לתגית גוגל אנליטיקס שלנו ולוודא שאנחנו מפעילים את תגית האופטימייז לפניה. על מנת לממש זאת נשתמש ב-Tag Sequence כשאנחנו קובעים את תגית האופטימייז כ-Setup Tag:

שידרוג קוד תג מנג’ר

חלקכם אולי שם לב שגוגל לאחרונה עשו שינוי קל בקוד של גוגל תג מנג’ר. אחד השינויים היה שגוגל המליצו להעביר את הקוד של תג מנג’ר קרוב ככל הניתן לפתיחת תגית ה-head (רצוי אחרי פתיחת תגית ה-meta charset). בעקבות כך גם אני מעדכן את המיקום של הקוד לצורך הטמעה זו.

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

עידכון: קוד Page Hiding (מומלץ אך לא חובה)

כשעושים טסטים מסוג A/B או Multivariant קיים סיכוי לא קטן שאלמנטים שצריכים לעבור שינויים (כמו החלפת תמונה לדוגמא) ירצדו על המסך פעם אחת (מה מכונה flickering). הדבר עלול לבוא ליידי ביטוי בעיקר במובייל שם בדרך כלל הטעינה איטית יותר מה שעלול להוביל לריצוד אגרסיבי יותר.

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

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

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

  • תמיכה בריבוי קונטיינרים של תג מנג’ר על גבי עמוד אחד.
  • שליטה בזמן השהייה שבו העמוד יהיה מוסתר (כברירת מחדל זה 4 שניות)
  • למפתחים, אפשרות להחליף את שם הקלאס ב-CSS שישלוט בהסתרה של העמוד. כברירת מחדל המחלקה נקראת .async-hide – אם זה מתנגש לכם עם הגדרה משלכם, תוכלו לשנות זאת.

את קוד ה-Page Hiding שקיבלנו בחלון של Optimize יש להציב בראש העמוד, אחרי פתיחת תגית ה-head, אחרי תגית ה-meta charset ולפני התג מנג’ר. הגדרה נוספת שאתם חייבים להקפיד עליה היא לוודא שהוא מכיל את המזהה של הקונטיינר תג מנג’ר שלכם בקוד. שימו לב, כאשר אתם מוצאים את הקוד מ-Optimize המזהה מייצג את הקונטיינר של Optimize, עליכם להחליף אותו לזה של התג מנג’ר שלכם – ראו סימון בכחול בתמונה.

תוכלו להבחין שגם הורדתי את זמן השהייה שבו העמוד יוסתר מ-4 ל-2 שניות (2000 מילישניות) – אגב פעם זה היה על 2 וגוגל העלו את זה ל-4, יכול להיות שלכל עמוד\אתר נכון לכוון את זה אחרת על בסיס הזמן שלוקח לטעון אותו.

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

הגדרת טסט ראשון ב-Google Optimize

ההשערה

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

בניית הטסט

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

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

באותו שלב אנחנו מתבקשים לבחור את סוג הטסט מתוך הסוגים המקובלים בתעשיה מזה שנים:

  • A/B test – טסט פשוט שבו הסקריפט מעלה את העמוד ועושה במהירות את השינויים הנדרשים מבלי לעבור לעמוד אחר. בדרך כלל יהיה מדובר בשינוי אחד על אלמנט אחד.
  • Multivariate test – או בקיצור MVT, טסט רב וריאציות המאפשר לבחון מספר רכיבים בעמוד על גבי מספר וריאציות של אותם רכיבים (כמו 2 תמונות, 3 קופי, ו-5 צבעי כפתור). הרעיון הוא לבחון איזה צירוף (קומבינציה) עובד הכי טוב.
  • Redirect test – המכונה בעגה המקצועית גם Split, מאפשר לכם להעביר את היוזר מהעמוד המקורי לעמוד “מראה” המכיל וריאציה של העמוד (או האתר) שהוכנה מבעוד מועד. נועד לטסטים מורכבים שיכולים לכלול שינויים בשלד של העמוד ושינויים רוחביים באתר.

רוב הטסטים שתעשו יהיו מסוג A/B test שגם במקרה הזה עונה הכי טוב על ההגדרה של הטסט שאני רוצה לבצע: בסך הכל צריך להזיז אלמנט ממקום אחד לאחר.

מטרות וטירגוט הניסוי

כאן תתבקשו לבחור מטרה מתוך רשימת המטרות שהגדרתם בגוגל אנליטיקס. אם תרצו תוכלו להגדיר גם גול שני כ-Secondary Objective. אל תתעצלו ורשמו גם את ההשערה שעליה מבוסס הניסוי תחת Description and hypothesis:

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

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

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

התוצאה נראת כך. שימו לב שאתם יכולים להוסיף כאן תנאים נוספים באמצעות לחיצה על כפתור ה-AND:

יצירת וריאציה

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

תנו לה שם משמעותי:

לחצו על changes 0 כדי להגיע ל-Editor. הכלי יבקש מכם לשמור את השינויים לפני שאתם עוזבים את העמוד (שינויים לא נשמרים אוטומאטית):

מסך האדיטור מצריך התקנת תוסף Google Optimize לכרום, התקינו אותו:

עריכת וריאציה ב-Editor

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

ווידג’ט עיצובים

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

דרך ווידג’ט זה ניתן בנוסף לעשות UNDO ו-REDO על השינויים שעשיתם עד כה לוריאציה זו.

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

להזכירכם, המטרה שלי היא להזיז את הווידג’ט של ההרשמה לניוזלטר שלי מהסיידבר שבצד שמאל לאיזור התוכן מצדו הימני של ה-Sidebar. השינוי הזה כרוך בהזזת אלמנט אחד לאלמנט אחר שאין ביניהם קשר של “אחים” עם אב משותף, זה מחייב אותי להשתמש בפיצ’ר קצת יותר מתקדם שנקרא Reorder. אני עובר לחלונית Select elements, מוודא שהסלקטור שלי תקין ומשם מגיע לאפשרות “Reorder” ע”י לחיצה על כפתור Add Change:

כשהקשר בין 2 תגיות הינו קשר של “אחים” (Siblings) כלומר הם נמצאים באותה היררכיה של אב משותף, ניתן לגרור אלמנט עם העכבר ובכך לבצע שינויי סדר מיקומים בקלילות.

חלונית הגדרת Reorder נפתחת ודורשת ממני לדעת:

  1. איזה אלמנט אני מעוניין להזיז? (זה כבר ידוע כי בחרתי אותו)
  2. לאיזה אלמנט אני מעוניין שהוא יזוז? במקרה הזה אני בוחר באלמנט הראשי של התוכן עם המזהה “primary”
  3. ביחס לאותו אלמנט, היכן להציב את האלמנט שאני מעוניין להזיז? – אני בוחר כמובן ב-Top, כלומר בתור הילד הראשון של primary.

והתוצאה: וואללה! 🙂 האלמנט קיפצץ לו אל עמודת התוכן הראשית:

עכשיו ניגש לבדוק איך הוריאציה נראית במכשירי מובייל בעזרת התפריט העליון:

כל שינוי שתעשו במסך העריכה ישפיע לרוחב כל סוגי המכשירים בלי אפשרות להתנות שינוי בסוג מכשיר.

אני רואה שבעמודים ראשיים אין בעיה:

מאחר ואני רץ על כל העמודים באתר אני רוצה לבדוק שגם עמודי המאמרים תקינים. לשם כך אני נכנס ל-Interactive Mode כדי שאני אוכל לעשות פעולות רגילות בעמוד כמו ללחוץ על לינק. למצב זה תוכלו להכנס או בהקשה על Shift+Enter או ע”י הקלקה על אייקון הזה שנמצא בתפריט העליון:

ממצב זה אני מסוגל ללחוץ על לינק ולדלג לעמוד פוסט:

עושה רושם שכרגע שיש באג שלא מאפשר לי לגלול במצב זה במובייל אז אני עושה סיבוב דרך ה-Desktop

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

שימוש ב-CSS כ-Change Rule לוריאציה

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

עכשיו האלמנט גלוי לעין.

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

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

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

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

בצעו שמירה ב-Editor ונמשיך לבדיקות והעלאה

תצוגה מקדימה

העיפו מבט על הוריאציה שלכם רגע לפני שאתם מעלים את הניסוי לאוויר, עשו וידו שתוצאה הסופית מוצאת חן בעיניכם ועובדת בלי כל הרעש הויזואלי של ה-Editor. בדומה לתג מנגר, הדרך הכי יעילה לצאת ממצב זה הוא לחזור לאותו מסך וללחוץ Turn off Preview.

מעלים את הניסוי

זהו זה, יש לנו 2 גירסאות מוכנות לקרב הגורלי שיקבע מי מהן תמשיך איתנו הלאה. כל שנותר לנו ללחוץ על Start Experiment ולהמתין לתוצאות.

סיכום

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

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

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