इस गाइड में, आप किसी मौजूदा कस्टम एचटीएमएल टैग को सैंडबॉक्स की गई JavaScript में बदलने का तरीका जानेंगे.
यह ट्यूटोरियल injectScript
एपीआई का इस्तेमाल करेगा. injectScript
एक सामान्य एपीआई है. इसका इस्तेमाल, तीसरे पक्ष की स्क्रिप्ट पर निर्भर करने वाले मौजूदा टैग को बदलने के लिए किया जाता है. ये टैग अक्सर स्क्रिप्ट लोड होने के दौरान बुनियादी फ़ंक्शन सेट अप करते हैं. फिर स्क्रिप्ट लोड होने के बाद, अतिरिक्त फ़ंक्शन जोड़कर उसे बेहतर बना देते हैं.
मूल टैग
<!-- 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 का इस्तेमाल करती है. इसके बाद, अपने कोड को ऐसे ही सैंडबॉक्स किए गए JavaScript API का इस्तेमाल करने के लिए बदलें.
उदाहरण के लिए, analytics.js
टैग में, इन नेटिव JavaScript एपीआई का इस्तेमाल किया जाता है:
नेटिव JavaScript | सैंडबॉक्स की हुई JavaScript |
---|---|
window.ga |
setInWindow |
arguments |
createArgumentsQueue |
+ new Date |
getTimestamp |
अपनी स्क्रिप्ट में सैंडबॉक्स किए गए JavaScript API का इस्तेमाल करने के लिए, आपको उन्हें require
करना होगा.
उदाहरण के लिए, setInWindow()
API का इस्तेमाल करने के लिए, इसे अपनी स्क्रिप्ट में सबसे ऊपर जोड़ें:
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
स्क्रिप्ट सिर्फ़ एक बार लोड की जाएगी:
- एक टैग जो कई बार चलता है
- एक ही कंटेनर में मौजूद कस्टम टेंप्लेट के एक से ज़्यादा टैग.
- उसी
cacheToken
के साथinjectScript()
का इस्तेमाल करने वाले दूसरे कस्टम टेंप्लेट
अनुमतियां
अगर आपने इस समय से पहले इस कोड को चलाने की कोशिश की, तो आपको कंसोल में कुछ गड़बड़ियां दिख सकती हैं.
ये गड़बड़ियां इसलिए दिखती हैं, क्योंकि सैंडबॉक्स JavaScript के लिए आपको उन वैल्यू और यूआरएल की जानकारी देनी होती है जिन्हें आप ऐक्सेस करते हैं. इस उदाहरण में, आपको 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
अनुमति की ज़रूरत नहीं है.
अगर फिर से कोड चलाएं पर क्लिक किया जाता है, तो आपको कंसोल में एक नई गड़बड़ी दिखेगी.
इस बार, गड़बड़ी में Inject Scripts
के बारे में बताया गया है.
Inject Scripts
की अनुमति को कॉन्फ़िगर करने के लिए:
https://www.google-analytics.com/analytics.js
कोAllowed URL Match Patterns
में जोड़ें.
अब कोड चलाएं पर क्लिक करने पर, कंसोल में कोई गड़बड़ी नहीं दिखेगी. आपने टैग को सफलतापूर्वक कस्टम टेंप्लेट में बदल दिया है. Save
पर क्लिक करें और अपने नए टैग का इस्तेमाल, Google Tag Manager के किसी दूसरे Tag की तरह ही करें.
पूरी तरह से बदला गया टैग
आपका फ़ाइनल सैंडबॉक्स किया गया 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);