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

במדריך הזה נסביר איך להמיר תג 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', 'GA-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', 'GA-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', 'GA-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 עבור כל תבניות. אם תספקו קריאה חוזרת (callback) משלכם, ודאו שהיא 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);