המרה של תג קיים

במדריך הזה נסביר איך להמיר תג HTML מותאם אישית שכבר קיים. להשתמש ב-JavaScript בארגז חול.

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

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

התג המקורי

זהירות: הסקריפט analytics.js משמש כדוגמה כאן, אבל לא בשימוש בסביבת הייצור. במקום זאת, צריך לפעול לפי פורסים את Google Analytics עם Tag Manager.

<!-- Google Analytics -->
<script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXXX-1', 'auto');
  ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

המרת הקוד

נבחן את חלק ה-JavaScript בתג שלמעלה:

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');

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

לדוגמה, בתג analytics.js, נעשה שימוש בממשקי ה-API המקוריים הבאים של JavaScript:

JavaScript מקורי	JavaScript בארגז חול
window.ga	setInWindow
arguments	createArgumentsQueue
+ new Date	getTimestamp

כדי להשתמש בממשקי ה-API של JavaScript שמופעלים בארגז חול (sandbox) בסקריפט, צריך require אותם. לדוגמה, כדי להשתמש ב-API setInWindow(), מוסיפים אותו לראש הסקריפט:

const setInWindow = require('setInWindow');

בשלב הבא, ממירים את window.ga:

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)}
// becomes
const createArgumentsQueue = require('createArgumentsQueue');
const ga = createArgumentsQueue('ga', 'ga.q');

לאחר מכן, ממירים את ההקצאה ga.l:

ga.l=+new Date;
// becomes
const getTimestamp = require('getTimestamp');
setInWindow('ga.l', getTimestamp(), true);

לבסוף, ממירים את שתי הקריאות ל-ga():

ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
// becomes
const trackingId = data.trackingId;
ga('create', trackingId, 'auto');
ga('send', 'pageview');

כדי להשתמש ב-data.trackingId, צריך להוסיף שדה לתבנית:

1. עוברים לכרטיסייה Fields ולוחצים על Add Field.

   

2. בוחרים את סוג השדה Text input.

   

3. משנים את המזהה מ-text1 ל-trackingId.

   

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

לשם כך:

<script async src='https://www.google-analytics.com/analytics.js'></script>

// becomes
const injectScript = require('injectScript');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);

הערה: כתובת ה-URL של הסקריפט היא בדרך כלל ערך cacheToken טוב.

העברה של cacheToken אל injectScript() מאפשרת אופטימיזציה. עבור בתרחישים הבאים, הסקריפט analytics.js ייטען רק פעם אחת:

• תג שפועל מספר פעמים
• יותר מתג אחד מהתבנית המותאמת אישית הזו באותו מאגר תגים.
• תבניות אחרות בהתאמה אישית שנעשה בהן שימוש ב-injectScript() עם אותו cacheToken

זהירות: אל תשכחו לציין את הקריאה החוזרת (callback) של data.gtmOnSuccess עד injectScript(). חובה לקרוא ל-data.gtmOnSuccess עבור כל תבניות. אם אתם מספקים מספר טלפון משלכם לקריאה חוזרת לאחר השלמת ההמרה, חשוב לוודא שהוא יתקשר למספר data.gtmOnSuccess.

הרשאות

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

השגיאות האלה מופיעות מכיוון ש-JavaScript בארגז חול (sandbox) דורש מכם להצהיר על ואת כתובות ה-URL שאליהן אתם ניגשים. בדוגמה הזו צריך לגשת אל ga.q, ga.l ו-ga משתנים גלובליים, וברצונך להחדיר סקריפט שמתארח אל https://www.google-analytics.com/analytics.js.

כדי להגדיר את ההרשאות של Global Variables:

1. עוברים לכרטיסייה Permissions, מרחיבים את הקטע Accesses Global Variables ולוחצים על לאחר מכן לוחצים על Add Key.

   

2. משתמשים במפתח ga ומסמנים את התיבות של Read, Write ו- Execute

   

3. חוזרים על התהליך הזה גם עבור ga.q וגם ga.l. שימו לב שהשדות האלה לא צריכים ההרשאה Execute.

   

בשלב הזה אם תלחצו שוב על Run Code (הרצת קוד), תופיע שגיאה חדשה במסוף. הפעם מצוין בשגיאה Inject Scripts.

כדי להגדיר את ההרשאה Inject Scripts:

1. מוסיפים את https://www.google-analytics.com/analytics.js אל Allowed URL Match Patterns.

   

   הערה: URL Match Patterns מאפשרים להשתמש בתווים כלליים לחיפוש של תת-דומיין ונתיב, כך שיכולת להשתמש ב-https://www.google-analytics.com/*. אבל יותר עדיפויות לדפוסי התאמה ספציפיים, אם אפשר. לצפייה inject_script Policy לקבלת פרטי המדיניות המלאים.

מעכשיו, כשלוחצים על הרצת קוד, לא אמורה להיות שגיאה במסוף. יש לך התג המומר בהצלחה לתבנית מותאמת אישית. לוחצים על Save. ומשתמשים בתג החדש כמו בכל תג אחר ב-Google Tag Manager.

תג שהומר במלואו

התוצאה הסופית של JavaScript ב-sandbox אמורה להיראות כך:

const setInWindow = require('setInWindow');
const copyFromWindow = require('copyFromWindow');
const createArgumentsQueue = require('createArgumentsQueue');
const getTimestamp = require('getTimestamp');
const injectScript = require('injectScript');
const trackingId = data.trackingId;

const ga = createArgumentsQueue('ga', 'ga.q');
setInWindow('ga.l', getTimestamp(), false);
ga('create', trackingId, 'auto');
ga('send', 'pageview');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);