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