דף זה תורגם על ידי Cloud Translation API.

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

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

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

התג המקורי

<!-- 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 הדרושים להרצה בארגז חול, צריך לבדוק באילו ממשקי API מקוריים של JavaScript משתמש הסקריפט הזה, ולהמיר את הקוד לשימוש בממשקי ה-API המקבילים של JavaScript שבארגז החול.

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

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

כדי להשתמש בממשקי ה-API של JavaScript שהופעל בהם ארגז חול בסקריפט, צריך 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 צריך להוסיף שדה לתבנית:

עוברים לכרטיסייה Fields ולוחצים על Add Field.
בוחרים את סוג השדה Text input.
משנים את המזהה מ-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);

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

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

הרשאות

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

אירעה שגיאה בגישה אל globals

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

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

מנווטים לכרטיסייה Permissions, מרחיבים את Accesses Global Variables ולוחצים על Add Key.
משתמשים ב-ga למפתח, ומסמנים את התיבות של Read, Write ו-Execute.
חוזרים על התהליך עבור ga.q ו-ga.l. שימו לב שהשדות האלה לא צריכים את ההרשאה Execute.

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

שגיאה במסוף להוספת סקריפטים

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

הוספה של https://www.google-analytics.com/analytics.js אל Allowed URL Match Patterns

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

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

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

התוצאה הסופית של JavaScript בארגז חול אמורה להיראות כך:

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);