נחש במה אני גולש?

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

למה זה חשוב?

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

ומה הבעיה לגלות איזה מכשיר?

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

ויש פתרון?

כן.

והוא חינם?

כן.

יאללה, שפוך...

אוקי, הנה זה - WURFL , והנה הקישור http://wurfl.sourceforge.net/
החברה הזו התפתחה ממאמץ קבוצתי ולכן הרשיון לשימוש הוא AGPL (חופשי). הם מעדכנים כל הזמן את טבלאות הניידים ומספקים פתרון קל להתקנה בשרת עם API נוח שבו אפשר לשאול ... "תגיד, אתה טלפון נייד?"
את העדכונים שלהם הם מבצעים אוטומטית וכך ניתן להיות בטוחים יחסית ברמת סבירות מאד מאד גבוהה שהתשובות אמינות.

חינם, אמרתי?

פילוח גולשים טורבו - הקוד

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

קראו ראשית את המאמר באתר Q42 - פילוח גולשים טורבו.

טופס יצירת Campain לסוכנים לצורך סינון ומעקב

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

Filter - סינון הסוכנים בקמפיין באנליטיקס

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

שימוש ב setCustomVar

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

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

Segment - סינון הסוכנים ב CustomVar

למרבה הצער Google Analytics כיום (דצמבר 2012) לא מאפשר לבצע סינון setCustomVar דרך פילטר ואנחנו מבצעים את הסינון בסגמנט כך:

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

דוחות סוכנים - custom reports

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

במקרה הזה אני מדגים את הטופס על setCustomVar אך לקמפיין זה יהיה דומה מאד.

זהו, זה הכל. אם יש לכם שאלות אתם מוזמנים לשאול כאן.

ניטור פעולות פייסבוק על גוגל אנליטיקס

ובאנגלית (לטובת מי שיחפש את זה דרך גוגל) : Tracking Facebook social actions on Google Analitics.
זהירות - פוסט טכני מאד!

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

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

אז לאחר שנדרשתי לסדר עבור אחד הלקוחות את הנושא - הנה אתם מקבלים את זה בחינם.

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

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

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

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

<script src="PATH_TO_FILE/ga_social_tracking.js"></script>
<script type="text/javascript">_ga.trackSocial();</script>

מרגע זה אנליטיקס יעקוב אחרי פעולות Like ו Send של פייסבוק

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

<comments href="PAGE_URL" notify="true" num_posts="X" width="Y"></comments>

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

הערות:

• הקוד יעקוב אחרי כפתורי like ו send ו comments שמוטמעים באתר בצורה רגילה. אם ההטמעה היא דרך מערכות כמו  AddThis או ShareThis, קראו את הנחיות גוגל כאן..
• הקוד עוקב גם אחרי ביטול פעולות - unlike ו uncomment.
• הקוד ינטר למעשה גם פעילות טוויטר, נכון אחלה?
• הקוד מופעל לאחר שפייסבוק מסיימת את הפעולה ומדווחת לדף. כלומר לא יתכן דיווח סתמי, לא יתכן דיווח של מישהו שלחץ על הכפתור ואז החליט שלא לאשר. אבל... אם סוגרים את הדף מהר, יתכן שפעולות מסויימות לא ירשמו... כלומר יתכן דיווח חסר.
• התיקון שלי לקוד ga_social_tracking כולל מספר שורות. השאירו לי פה הערה אם אתם צריכים אותן.

להתראות, תעשו כיף, יובל.

.

התקנת מעקב אנליטיקס כפול (Google Analytics)

פוסט סופר טכני, ברמת קוד. אל תקראו בכלל אם אתם לא מתכנתים או מנתחי רשת - Web Analyst.

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


אנליטיקס כפול, בלי סוכר



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

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




התקנת מעקב Google Analytics כפול על אותו דף HTML

קוד גוגל אנליטיקס מתחיל כך ('UA-11111111-1' - מספר הזיהוי לחשבון של בעל האתר):

var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-11111111-1']);
     _gaq.push(['_trackPageview']);

(function().... וכן הלאה

בכדי להוסיף חשבון נוסף, יש לצרף לסקריפט את השורה הבאה ('UA-22222222-1' - מספר הזיהוי של חשבון האניטיקס השני):

    _gaq.push( ['analytics2._setAccount', 'UA-22222222-1'], ['analytics2._trackPageview'] );

את השורה הזו אפשר לצרף בכל מקום אחרי ההכרזה על _gaq או כסקריפט עצמאי אחרי הסקריפט הראשון.

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

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

מרדף אחרי באגים

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

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

המקרה הראשון התחיל כשפתאום האתר טען כל דף פעמיים. מה שגולשים ראו היה שהדף מופיע, נעלם ומופיע שוב. בפעם השניה נוסף גם סימן # לכתובת הדף.
לקח קצת זמן לגלות אבל זו היתה תקלה של AddThis - כפתור השיתוף הנפוץ ביותר ברשת. הם שיחררו גרסה חדשה ובלי להודיע לאף אחד חירפנו אתרים כמו שלי וכמו themarker וגדולים יותר בארץ ובעולם. ברגע שעליתי על זה הורדתי את הכפתור מהאתר. הפורום של Addthis התחיל להתמלא בהערות של לקוחות ובאמת תוך יומיים יצא תיקון חירום שהסדיר את המצב ואפשר לי להחזיר את הכפתור.

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

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

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

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

מי אמר חננה?! מי אמר את זה!

כשתגמור לבדוק - תבדוק עוד פעם

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

לא סומכים על שום נתון שמגיע מהמשתמש!

שוב -

לא מאשרים ולא סומכים על שום מידע שמגיע מהמשתמש!

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

כל נתון חייב להבדק בצד השרת שוב. תעודת זהות? דוא"ל? שם משתמש וסיסמה? הכל חייב להבדק לפני שמשתמשים בו. במיוחד לפני שמתחילים פעולות איחסון או שליפה מול בסיסי נתונים.

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