इस पेज का अनुवाद Cloud Translation API से किया गया है.

किसी मौजूदा टैग को बदलना

इस गाइड में, आप किसी मौजूदा कस्टम एचटीएमएल टैग को सैंडबॉक्स की गई 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 में जोड़ें.

ध्यान दें: URL Match Patterns, सबडोमेन और पाथ के लिए वाइल्डकार्ड की अनुमति देता है, ताकि आप https://www.google-analytics.com/* का इस्तेमाल कर सकें. हालांकि, अगर हो सके, तो ज़्यादा खास मैच पैटर्न को प्राथमिकता दी जाती है. नीति की पूरी जानकारी के लिए, inject_script की नीति देखें.

अब कोड चलाएं पर क्लिक करने पर, कंसोल में कोई गड़बड़ी नहीं दिखेगी. आपने टैग को सफलतापूर्वक कस्टम टेंप्लेट में बदल दिया है. 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);