פרסונליזציה לדפי נחיתה באמצעות גוגל תג מנג’ר

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

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

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

מה אנחנו הולכים לעשות?

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

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

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

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

אסטרטגיית הביצוע

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

1. בעמוד הנחיתה של כנס All Things Data – ברגע שהסמן של הגולש עוזב שדה מסוים (למשל עובר משדה Full name לשדה Email address) אני שומר את הפרטים שהוא מילא בשדה Full name בתוך ה-local storage של הדפדפן.

2. בעמוד הנחיתה של קורס גוגל אנליטיקס – ברגע שהגולש שולח את הטופס אני שומר את הפרטים שלו ב-local storage של הדפדפן.

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

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

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

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

רגע, מה זה בכלל Local Storage?

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

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

[syntax type=”js”]localStorage.setItem(‘itemName’,’itemValue’)[/syntax]

וכדי לשלוף את המידע ששמרנו צריך לרשום:

[syntax type=”js”]localStorage.getItem(‘itemName’)[/syntax]

המידע עצמו נשמר בתוך תיקייה במחשב –

אם אתם עם מחשב PC הוא יישמר בתוך התיקייה C:Documents and SettingsadministratorLocal SettingsApplication DataGoogleChromeUser DataDefaultLocal Storage

ואם אתם עם מקינטוש הוא יישמר בתוך ~/Library/Application Support/Google/Chrome/Default/Local Storage/

כדי לצפות במידע השמור כל שעליכם לעשות הוא לחוץ על Ctrl + Shift + J (או Ctrl + Cmd + J אם אתם עם מק), ואז ללכת ללשונית Resources > Local Storage:

מסובך? ממש לא.

שמירת המידע של המשתמש בתוך ה-Local Storage

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

בשביל ההדגמה בואו נלך לדף שיצרתי במיוחד לצורך העניין בכתובת הזו: https://www.lixfix.co.il/personalization.html.

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

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

1. השם של הגולש (או כלום במידה ואין אף שם בתוך ה-local storage).

2. במידה וזה גולש חוזר אני ארצה להוסיף את המילה “שוב”.

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

4. ולבסוף ארצה לשנות גם את המילה “מוזמן” או “מוזמנת” על פי מין הגולש.

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

פרסונליזציה בגוגל תג מנג’ר הלכה למעשה

אסטרטגיית הפעולה שלנו כוללת מספר שלבים:

1. נקלוט את שדות הטופס כאשר הוא נשלח.

2. נשלח קוד HTML שישמור את הערכים של הטופס בתוך ה-local storage לאחר שליחת הטופס.

3. כאשר הגולש חוזר לאתר נשלוף את הערכים הקיימים מתוך ה-local storage ונציג אותם במקום הערכים הדיפולטיבים.

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

שלב ראשון – קליטת שדות הטופס לאחר שליחה ושמירתם ב-local storage

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

במקרה שלנו נרצה ליצור פונקציות (=variables) שיחזירו לנו את הערכים:

1. שם הגולש.

2. שם המשפחה שלו.

3. מין הגולש.

4. גולש חדש או חוזר.

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

[syntax type=”js”]function() {
var selected = document.querySelector(‘[name=”gender”]’);
return selected ? selected.options[selected.selectedIndex].text : undefined;
}[/syntax]

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

[syntax type=”js”]<script>
localStorage.setItem(‘fname’,document.getElementById(“firstName”).value);
localStorage.setItem(‘lname’,document.getElementById(“familyName”).value);
localStorage.setItem(‘gender’,{{get the gender field value}});
</script>[/syntax]

שלב שני – שליפת הערכים מתוך ה-local storage והצגתם לגולש

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

לשם כך ניצור Custom JS Variable נוסף עם הקוד הבא, שפשוט יבדוק האם 3 הערכים (שם, משפחה, מין) קיימים ב-local storage ואם כן יחזיר את הערך “returning”, כלומר מדובר בגולש חוזר:

[syntax type=”js”]

function() {

var fname = localStorage.getItem(‘fname’);
var lname = localStorage.getItem(‘lname’);
var gen = localStorage.getItem(‘gender’);

if (fname !== null && lname !== null && gen !== null) {return “returning”}
else {return “new”};
}

[/syntax]

כעת ניצור תג מסוג Custom HTML שיישלח בכל פעם שהגולש נכנס לאתר, בתנאי שה-variable שיצרנו קודם יחזיר את הערך returning.

המטרה של התג הזה היא לשנות את התוכן של העמוד במידה והוא אכן זיהה שהגולש שלנו הינו גולש חוזר:

[syntax type=”js”]

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>

<script>
var fname = localStorage.getItem(‘fname’);
var lname = localStorage.getItem(‘lname’);
var invited = localStorage.getItem(“gender”) == “זכר”? “מוזמן”: “מוזמנת”;
var you = localStorage.getItem(“gender”) == “זכר”? “אתה”: “את”;
$(“#name”).text(” ” + fname + ” ” + lname);
$(“#gender”).text(you);
$(“#again”).text(” שוב”);
$(“#invited”).text(invited);
</script>

[/syntax]

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

השורה השניה והשלישית מושכות את השם והמשפחה מה-local storage ומכניסות אותו לתוך משתנה JS.

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

לאחר מכן מתבצעים שינויי הטקסטים, ולבסוף עוברים לשלב יצירת הטריגר של התג הזה. במקרה שלנו הטריגר אומר ש”במידה וה-variable שיצרנו קודם (new or returning user) מחזיר returning תשלח את התג”:

בואו נראה אם זה עובד:

אני נכנס ללינק שיצרתי לצורך הדוגמא (לינק) ורואה שאין כלום ב-local storage:

ממלא פרטים ושולח את הטופס ו… בום! העמוד נטען מחדש עם הודעה אישית (והמילה “שוב”), והטקסט משתנה לנוסח “זכרי”:

סיכום

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

מקווה שנהניתם ולא לשכוח לשתף!