הוספת מונה Stats4U באמצעות Google Tag Manager

יש מדריך בנושא בבלוג משנת 2015. צילומי המסך שלו מציגים ממשק Tag Manager שכבר אינו נראה כך, ואחד משבעת השלבים שלו – סימון document.write – כבר אינו נחוץ כלל. המדריך הזה מחליף אותו.

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

הגרסה הקצרה

בתוך Tag Manager: Tags → New → Custom HTML, ויש להדביק שורה אחת בשדה HTML:

<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

יש להגדיר את הטריגר עבור All Pages; לאחר מכן יש לשמור ולפרסם את הקונטיינר. המאפיין data-id מקבל את מספר המונה, שמופיע בדף הסטטיסטיקה.

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

מה זה עושה בפועל, ולמה אולי זאת אינה הבחירה המתאימה

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

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

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

הצבת מונה גלוי במקום מסוים דורשת מעט יותר.

שליטה במקום שבו מופיע המונה

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

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

<div id="s4u_cp0"></div>

שלב שני – בתוך Tag Manager, זה מחליף את קטע הקוד בן השורה האחת. אותו סוג תגית Custom HTML:

<script>
(function () {
  // No placeholder on this page? Then no counter, and no request either.
  if (!document.getElementById('s4u_cp0')) { return; }

  window.s4uid         = ['YOUR-ID'];
  window.s4u_paramsarr = [{ s4ustyleid: '100' }];

  var s = document.createElement('script');
  s.src = 'https://www.stats4u.net/s4u.js';
  document.head.appendChild(s);
})();
</script>

שלב שלישי – יש לשנות את הטריגר. זה החלק שמכשיל אנשים. All Pages מופעל מוקדם ככל ש־Tag Manager מסוגל, ולעיתים קרובות זה קורה לפני שמציין המקום קיים במסמך. הטריגר המובנה DOM Ready הוא המתאים כאן. המונה חייב להגיע אחרי ה־div, ולא לפניו.

המונה מופיע כעת בתוך אותו div, ולא בשום מקום אחר.

שליטה בדפים שבהם הוא מופיע

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

מציין המקום הוא אחד מהם. השורה הראשונה בתוך הפונקציה עושה את העבודה: אם אין s4u_cp0 בדף, היא נעצרת והסקריפט אפילו אינו מורד. לכן תבנית שכוללת את ה־div מקבלת מונה, ותבנית שאינה כוללת אותו אינה מקבלת מונה – ההחלטה נעשית בתבניות האתר עצמן, ללא שינוי ב־Tag Manager וללא שלב פרסום.

הטריגר הוא השני. אפשר לקבל את אותה החלטה בתוך Tag Manager במקום זאת: תנאי על הטריגר, כך שיופעל ב־DOM Ready רק כאשר Page Path תואם. הטריגר מתאים לכללים לגבי כתובות URL, ומציין המקום מתאים לכללים לגבי תבניות.

יותר ממונה אחד בדף

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

window.s4uid         = ['ID-ONE', 'ID-TWO'];
window.s4u_paramsarr = [{ s4ustyleid: '981' }, { s4ustyleid: '100' }];

הראשון נכנס אל s4u_cp0, והשני אל s4u_cp1. שניהם נבדקו בדפדפן בזמן הכתיבה: הראשון צויר כסמל בגודל 20 × 20, והשני כרצועה בגודל 162 × 25, כל אחד בתוך מציין המקום שלו ולא בשום מקום אחר בדף.

ארבעה דברים שעלולים להכשיל

• שתי השיטות אינן משתלבות זו בזו. תגית שיש לה מאפיין data-id ושגם מגדירה את הרשימה מפיקה שני מונים, ושתי הצפיות נספרות בנפרד.
• הרשימה תמיד צריכה s4ustyleid. המאפיין data-style חוזר בשקט לעיצוב 30 כשהוא חסר. לגרסת הרשימה אין גיבוי כזה והיא תבקש עיצוב ריק.
• מציין מקום חסר נכשל בשקט. אין מונה, אין שגיאה, אין דבר במסוף. כשלא מופיע דבר, המזהה הוא החשוד הראשון – s4u_cp0, עם אפס, לא האות O.
• היעדר הקישור במונה הבלתי נראה מכוון. עיצוב 980 מצויר ללא קישור, מפני שיעד לחיצה שקוף של פיקסל אחד בדף של מישהו אחר הוא מלכודת ולא תכונה. לצורך קישור, עיצוב 981 עושה זאת באמצעות הסמל הקטן שלו.

בדיקה שזה עבד

המצב של Tag Manager שנקרא Preview טוען את הדף כשהקונטיינר פעיל. התגית אמורה להופיע בין התגיות שהופעלו עבור האירוע DOM Ready. דף הסטטיסטיקה מאשר זאת לאחר מכן – ביקור דרך Preview נספר כמו כל ביקור אחר, ולכן המספר אמור להשתנות בתוך כמה שניות.

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