👌🏿 👩🏾‍💼 👩🏾‍🤝‍👩🏽 जीटीएम में कस्टम टेम्पलेट: एक उदाहरण 🤘🏿 🤛🏻 🎍

मई के अंत में, Google ने Google टैग प्रबंधक (GTM): कस्टम टेम्पलेट या कस्टम टेम्पलेट में एक नई सुविधा शुरू की। आइए देखें कि इसकी आवश्यकता क्यों है, इसका उपयोग कैसे करें, HTML टैग और जावास्क्रिप्ट चर से क्या अंतर हैं।

एक उदाहरण के रूप में, VKontakte डायनामिक रिटारगेटिंग पिक्सेल के लिए एक कस्टम टेम्पलेट बनाने पर विचार करें और इसके माध्यम से GTM टैग को कस्टमाइज़ करें।

कस्टम टेम्पलेट के बारे में सरल शब्द
एक कस्टम टेम्पलेट बनाना
• जानकारी टैब
• फ़ील्ड टैब
• कोड टैब
• अनुमतियाँ टैब
निर्मित कस्टम टेम्पलेट पर टैग का अनुकूलन और परीक्षण
• पेज पेज
• AddToCart
• खनन परीक्षण
निष्कर्ष

कस्टम टेम्पलेट के बारे में सरल शब्द

कस्टम टेम्प्लेट ऐसे टेम्प्लेट होते हैं जिनके द्वारा उपयोगकर्ता नए टैग या चर बना सकते हैं। जीटीएम के पास तैयार किए गए टेम्पलेट (फीचर्ड या अनुशंसित अनुभाग में) हैं, उदाहरण के लिए, Google Analytics टैग, Google ऑप्टिमाइज़, और अन्य। अब हम उन्हें अपने टेम्प्लेट के साथ पूरक कर सकते हैं। बन जाने पर, वे कस्टम टैब में दिखाई देंगे:

HTML टैग्स और JS वेरिएबल्स से महत्वपूर्ण अंतर यह है कि जब कोई उपयोगकर्ता तैयार किए गए टेम्पलेट का उपयोग करके कोई टैग या चर बनाता है, तो वह JS कोड के साथ इंटरैक्ट नहीं करता है।

उपयोगकर्ता टेम्पलेट के लिए कोड डेवलपर या वेब विश्लेषक द्वारा इसके निर्माण के चरण में लिखा गया है। फिर, यूजर टेम्प्लेट के अनुसार टैग या वेरिएबल बनाते समय, इंटरफ़ेस के माध्यम से सभी इंटरैक्शन किए जाते हैं (जो यूजर टेम्पलेट बनाते समय भी कॉन्फ़िगर किया गया है):

तदनुसार, HTML टैग या जेएस चर लिखने के साथ तुलना में, उपयोगकर्ता टेम्पलेट के अनुसार टैग या चर को अनुकूलित करना परिमाण का एक क्रम आसान हो जाता है, क्योंकि इसके लिए जावास्क्रिप्ट के साथ काम करने में ज्ञान और कौशल की आवश्यकता नहीं होती है।

कस्टम टेम्पलेट्स का एक और बड़ा प्लस यह है कि टैग के JS कोड में त्रुटि के कारण किसी साइट को "डालने" की संभावना कम हो जाती है।

हमारे उदाहरण में, गतिशील रिटारगेटिंग टैग "VKontakte" को कॉन्फ़िगर करने के लिए आपको अब डेवलपर्स से संपर्क करने की आवश्यकता नहीं है - सब कुछ स्वतंत्र रूप से सेट किया जा सकता है, यहां तक कि माल के बारे में डेटा का हस्तांतरण (साइट पर कॉन्फ़िगर किए गए उन्नत Google ई-कॉमर्स के साथ), जिसमें केवल जीटीएम का अनुभव हो।

एक कस्टम टेम्पलेट बनाना

चूंकि हम एक टैग टेम्प्लेट बना रहे हैं, हमें टेम्प्लेट सेक्शन में जाकर टैग टेम्प्लेट सेक्शन में न्यू बटन पर क्लिक करना होगा।

उसके बाद, टेम्पलेट संपादक खुलता है:

संपादक के बाईं ओर एक सेटिंग विंडो है, दाईं ओर एक पूर्वावलोकन विंडो और एक कंसोल है। सेटिंग्स विंडो में चार टैब हैं जो टेम्पलेट के साथ बनाने और काम करने के लिए आवश्यक हैं।

जानकारी टैब

टैग पर जानकारी इस टैब पर भरी गई है: नाम, विवरण, आइकन। यह वह जानकारी है जिसे हम टेम्प्लेट की सूची में एक नया टैग बनाते समय देखेंगे:

टैग आइकन के लिए आवश्यकताएं हैं: पीएनजी, जेपीईजी या जीआईएफ प्रारूप, कम से कम 64x64 पिक्सल का संकल्प और 50 केबी से अधिक का आकार नहीं।

फ़ील्ड्स टैब

यह खंड हमारे टेम्पलेट का इंटरफ़ेस बनाता है। इंटरफ़ेस में विभिन्न फ़ील्ड और फ़ार्म होते हैं जिनके साथ उपयोगकर्ता एक नया टैग या चर बनाने के चरण में इंटरैक्ट करता है।

भविष्य में, इंटरफ़ेस का उपयोग करके टैग बनाते समय उपयोगकर्ता द्वारा दर्ज की गई जानकारी का उपयोग टेम्पलेट कोड में किया जाता है।

एक नया तत्व जोड़ने के लिए, फ़ील्ड जोड़ें बटन पर क्लिक करें। तत्व प्रकार चुनने के लिए विंडो दिखाई देती है:

GTM आपको निम्न प्रकार के इंटरफ़ेस तत्वों का चयन करने की अनुमति देता है:

पाठ बॉक्स
ड्रॉप डाउन मेनू
चेक बॉक्स ;
स्विच;
सरल तालिका , यहां आप प्रत्येक सेल को संपादित कर सकते हैं।
विस्तारित तालिका , आप केवल एक पंक्ति संपादित कर सकते हैं, इस प्रकार की तालिका कुंजी-मूल्य जोड़े से एक शब्दकोश बनाने के लिए उपयोग करने के लिए सुविधाजनक है;
तत्वों का समूह , आपको एक समूह में कई प्रकार के समूह बनाने की अनुमति देता है;
शॉर्टकट का उपयोग इंटरफ़ेस में पाठ जोड़ने के लिए किया जाता है, इसके लिए उपयोगकर्ता को किसी भी डेटा को दर्ज करने की आवश्यकता नहीं होती है।

एक तत्व जोड़ने के बाद, आपको इसे एक अनुकूल नाम देने की आवश्यकता है, जो तब कोड में उपयोग किया जाएगा। यह एक प्रकार का परिवर्तनशील नाम है - इसे समझा जाना चाहिए और बनाए गए इंटरफ़ेस तत्व का सार प्रकट करना चाहिए। उदाहरण के लिए, "आईडी" नाम का अर्थ कुछ खास नहीं है, लेकिन नाम "पिक्सेलआईडी" पहले से ही दिखाता है कि उपयोगकर्ता द्वारा दर्ज किए गए पिक्सेल आईडी इस तत्व में संग्रहीत हैं:

अगला, प्रत्येक तत्व की सेटिंग्स पर जाएं और आवश्यक गुणों को सक्रिय करें।
अलग-अलग स्थितियों में, इंटरफ़ेस तत्व के विभिन्न गुणों की आवश्यकता होती है, इसलिए डिफ़ॉल्ट रूप से वे सभी छिपे हुए हैं और हमें उन लोगों को सक्रिय करने की आवश्यकता है जो अभी आवश्यक हैं:

विभिन्न प्रकार के तत्वों के लिए, उपलब्ध गुण भिन्न होते हैं, मैं सबसे अधिक बार उपयोग किए जाने वाले संकेत करूंगा, जो लगभग सभी तत्व हैं:

1. प्रदर्शन नाम । यह वह नाम है जिसे उपयोगकर्ता टैग बनाते समय इंटरफ़ेस में देखेगा:

2. उदाहरण मूल्य । यह उपयोगकर्ता के लिए एक संकेत है कि फ़ील्ड में कौन से मान दर्ज करने हैं:

3. मदद पाठ । यह वह पाठ है जिसे उपयोगकर्ता तत्व की सहायता आइकन पर मँडराते हुए देखेगा:

4. डेटा सत्यापन के लिए नियम । इस संपत्ति में, आप उपयोगकर्ता द्वारा क्षेत्र में दर्ज किए गए डेटा की जांच के लिए कुछ नियम निर्धारित कर सकते हैं, और यदि आवश्यक हो, तो त्रुटि पाठ जो तब दिखाई देता है जब आप डेटा के साथ एक टैग को बचाने की कोशिश करते हैं जो परीक्षण पास नहीं किया था।

उदाहरण के लिए, आप निर्दिष्ट कर सकते हैं कि फ़ील्ड को भरना होगा। दूसरा उदाहरण: आपको उपयोगकर्ता से एक ईमेल पता प्राप्त करने की आवश्यकता है, फिर आप यह सत्यापित कर सकते हैं कि उपयोगकर्ता द्वारा दर्ज किया गया डेटा नियमित अभिव्यक्ति होना चाहिए । * @ *। * \ .. * ।

यदि दर्ज डेटा सत्यापन नियमों का पालन नहीं करता है, तो प्रकट होने वाले त्रुटि पाठ को निर्दिष्ट करने के लिए, आपको उन्नत नियम सेटिंग्स को सक्रिय करने की आवश्यकता है:

इसके अलावा, उन्नत सेटिंग्स में, आप उन शर्तों को निर्दिष्ट कर सकते हैं जिनके तहत यह नियम सक्रिय है (स्थिति सक्षम करें क्षेत्र)।

5. समावेशन की शर्तें । ये ऐसी स्थितियां हैं जिनके तहत उपयोगकर्ता के पास यह इंटरफ़ेस तत्व होगा।

उदाहरण के लिए, इंटरफ़ेस तत्वों के साथ टेम्पलेट को अधिभार नहीं देने के लिए, आप चेक बॉक्स के चयन के समय आवश्यक तत्वों की उपस्थिति बना सकते हैं। मान लीजिए कि, यदि कोई उपयोगकर्ता पिक्सेल में उत्पाद डेटा के हस्तांतरण को कॉन्फ़िगर करना चाहता है (यह साइट पर कॉन्फ़िगर किए गए उन्नत Google ई-कॉमर्स साइट के साथ संभव है), तो वह "उत्पाद डेटा स्थानांतरित करने के लिए डेटालेयर का उपयोग करें" चेक बॉक्स का चयन करता है, और बॉक्स को चेक करने के बाद, तत्व टैग इंटरफ़ेस में दिखाई देते हैं इस तरह के हस्तांतरण को कॉन्फ़िगर करने के लिए आवश्यक है। यदि बॉक्स की जांच नहीं की जाती है, तो इंटरफ़ेस में कोई तत्व नहीं हैं।

मैं ध्यान देता हूं कि यहां तत्व के नाम को इंगित करना आवश्यक है, जिसे जोड़ने के तुरंत बाद इसे सौंपा जाना था।

जैसा कि आप सेटिंग्स जोड़ते हैं और एक इंटरफ़ेस बनाते हैं, पूर्वावलोकन विंडो में सभी परिवर्तनों को तुरंत देखा और परीक्षण किया जा सकता है:

कोड टैब

यह टैब एक कोड संपादक है।

जीटीएम कस्टम टेम्प्लेट कोड "ईएस 6 जावास्क्रिप्ट" छीन लिया गया है और एक अलग वातावरण में चलता है जहां एपीआई के माध्यम से वैश्विक डेटा (यानी सीधे पृष्ठ के साथ) के साथ सभी संचार किया जाता है। कोई वैश्विक वस्तुएं नहीं हैं, जैसे कि खिड़की या दस्तावेज़, इसमें, क्रमशः, सामान्य तरीके, भी। उदाहरण के लिए, कन्स्ट्रक्टर (नई वस्तु और जैसे), सेटटाइमआउट, पार्सइंट, डिलीट, आदि। - यह सब कस्टम टेम्पलेट में काम नहीं करेगा।

लेकिन इस सब के लिए एक एपीआई है। और इसलिए, कस्टम टेम्पलेट के लिए कोड लिखना इस तथ्य से शुरू होना चाहिए कि हम उन एपीआई को परिभाषित करते हैं जो हम अपने कोड में उपयोग करेंगे:

// API //     const copyFromWindow = require('copyFromWindow'); //     const setInWindow = require('setInWindow'); //      const injectScript = require('injectScript'); //    const callInWindow = require('callInWindow'); //  ,     ,    const makeTableMap = require('makeTableMap'); //   URL  const getUrl = require('getUrl'); //    const getQueryParameters = require('getQueryParameters'); //     const makeInteger = require('makeInteger'); //    const makeString = require('makeString'); //  setTimeout const callLater = require('callLater'); //  console.log const logToConsole = require('logToConsole');

विस्तृत दस्तावेज़ के साथ API की पूरी सूची के लिए Google डेवलपर सहायता देखें।

मैं आपको एपीआई के साथ काम करने के उदाहरण दिखाऊंगा:

कार्रवाई का वर्णन	क्लासिक जे.एस.	कस्टम टेम्पलेट एपीआई
कंसोल आउटपुट	कंसोल.लॉग ('हाय');	logToConsole ('हाय');
टाइमर सेट करें	setTimeout (फ़ंक्शन, 100);	callLater (फ़ंक्शन);
स्ट्रिंग में परिवर्तित करें	स्ट्रिंग (1234);	makeString (1234);
पूर्णांक में रूपांतरण	parseInt ('1234', 10);	मेकइंटर ('1234');
पृष्ठ होस्ट	window.location.hostname	getUrl ('होस्ट');

जैसा कि आप उदाहरण तालिका से देख सकते हैं, एपीआई को परिभाषित करने के बाद, आपको मानक जेएस निर्माणों के बजाय इसका उपयोग करना होगा।

हमने एपीआई को परिभाषित करने के बाद, उपयोगकर्ता द्वारा दर्ज की गई सेटिंग्स के साथ एक वस्तु को परिभाषित करना वांछनीय है। यह बाद में भी किया जा सकता है, उदाहरण के लिए, निष्पादन योग्य कोड के दौरान, उपयोगकर्ता की सेटिंग्स से आवश्यक डेटा का अनुरोध करना। लेकिन अगर हम शुरू से ही सेटिंग्स ऑब्जेक्ट को परिभाषित करते हैं, तो कोड के साथ काम करना आसान और अधिक समझ में आता है, क्योंकि सभी उपयोगकर्ता सेटिंग्स एक अलग ऑब्जेक्ट में संग्रहीत होती हैं।

इंटरफ़ेस तत्व से डेटा प्राप्त करने के लिए, आपको डेटा निर्माण का उपयोग करना होगा।

{{एक तत्व नाम}}:

 //    const settings = { //  event: data.event, //ID  () pixelIDs: data.pixelIDs, //ID - (  1 -) priceListId: data.priceListId, //   -? fewPriceLists: data.fewPriceLists, //ID - (    ) priceListIds: data.priceListIds === undefined ? data.priceListIds : makeTableMap(data.priceListIds,'hostname','priceListId'), //  ecommerce   ? ecommerceUse: data.ecommerceUse, // ecommerce   eventEcommerce: data.eventEcommerce, //     siteSearchQueryParam: data.siteSearchQueryParam };

नोट: यदि आप मेकटेबल मैप विधि से अपरिभाषित हैं, तो यह एक स्क्रिप्ट त्रुटि का कारण बनेगा, इसलिए मैं ऐसी स्क्रिप्ट्स को फ़िल्टर करने के लिए एक टर्नरी ऑपरेटर (अगर-अन्य निर्माण का संक्षिप्त रिकॉर्ड) का उपयोग करता हूं।

MakeTableMap विधि के बारे में।

यदि इंटरफ़ेस एक विस्तारित तालिका का उपयोग करता है, तो इसमें डेटा इस रूप में संग्रहीत किया जाता है:

 [ 'key': 'k1', 'value': 'v1'}, 'key': 'k2', 'value': 'v2'} ]

MakeTableMap विधि के साथ प्रसंस्करण के बाद, डेटा कुंजी-मूल्य जोड़े के साथ एक नियमित ऑब्जेक्ट बन जाता है:

 { 'k1': 'v1', 'k2': 'v2' }

कस्टम टेम्पलेट कोड के लिए एक और आवश्यकता: यदि टैग सफलतापूर्वक निष्पादित किया जाता है, तो आपको data.gtmOnSuccess () विधि को कॉल करना होगा, और एक त्रुटि के मामले में, data.gtmOnFailure () विधि को कॉल करें।

उदाहरण के लिए, मेरे कोड में, data.gtmOnSuccess () विधि को अनुरोध के सफलतापूर्वक भेजे जाने के बाद कॉल किया जाता है, और डेटा .gtmOnFailure () विधि को कहा जाता है यदि डाउनलोड बाहरी स्क्रिप्ट पृष्ठ VV openapi.js पर विफल रहता है।

एपीआई को परिभाषित करने और सेटिंग्स के साथ ऑब्जेक्ट को परिभाषित करने के बाद, आप पिक्सेल को काम करने के लिए एक एल्गोरिथ्म लिखना शुरू कर सकते हैं।

यहाँ याद रखने वाली मुख्य बात है:

• यदि आपको एक वैश्विक चर प्राप्त करने की आवश्यकता है - तो CopyFromWindow API विधि का उपयोग करें।

 copyFromWindow('VK'); //VK -   ,

• यदि आपको एक वैश्विक चर सेट करने की आवश्यकता है, तो हम setInWindow API पद्धति का उपयोग करते हैं।

 setInWindow('openapiInject', 1); //openapiInject -   ,    //1 - ,    .

• यदि आपको एक वैश्विक फ़ंक्शन चलाने की आवश्यकता है, तो हम callInWindow API विधि का उपयोग करते हैं।

 callInWindow('VK.Retargeting.Init', p); //VK.Retargeting.Init -   ,    //p - ,

• यदि आपको पृष्ठ पर एक बाहरी स्क्रिप्ट जोड़ने की आवश्यकता है - इंजेक्टस्क्रिप्ट एपीआई विधि का उपयोग करें।

 injectScript('https://vk.com/js/api/openapi.js?159', pixel.setVkAsyncInit(), data.gtmOnFailure, 'vkPixel'); //https://vk.com/js/api/openapi.js?159 -  ,      //pixel.setVkAsyncInit() - ,        //data.gtmOnFailure - ,        //vkPixel -  ,  ,   URL  .    ,   JavaScript

• यदि आपको URL (या इसका कुछ भाग) प्राप्त करने की आवश्यकता है - GetUrl API विधि का उपयोग करें।

 getUrl('host'); //host -  URL,  .  ,  host: protocol, port, path, extension, fragment, query.

जैसा कि मैंने ऊपर लिखा है, कस्टम टेम्पलेट जेएस ईएस 6 का समर्थन करता है। इस वाक्यविन्यास का उपयोग करना उचित है, क्योंकि यह कोड को छोटा करता है और इसे और अधिक पठनीय बनाता है, और JS का कार्य अधिक अनुमानित है और अन्य प्रोग्रामिंग भाषाओं के समान है।

JS ES6 सिंटेक्स पर अधिक

मुख्य चीज जो उपयोग करने के लिए वांछनीय है वह एरो फ़ंक्शंस और कॉन्स्टेशंस की घोषणा है और वेरिएबल के बजाय वेरिएबल्स को छोड़ देना चाहिए।

Const के माध्यम से घोषित एक वैरिएबल एक स्थिर है जिसका मान नहीं बदला जा सकता।

एक चर के माध्यम से घोषित एक चर के माध्यम से घोषित चर से भिन्न होता है:

वैश्विक विंडो ऑब्जेक्ट में जोड़ा नहीं जाता है;
चलो की दृश्यता घोषणा ब्लॉक तक सीमित है;
चलो के माध्यम से घोषित चर को फिर से घोषित नहीं किया जा सकता है।

एरो फ़ंक्शंस सामान्य कार्यों का एक संक्षिप्त नाम हैं:

 //1.   const func1 = function() { return 'test'; } //    const func1 = () => 'test'; //2.   const func2 = function(arg) { if (arg > 0) return 'plus'; else return 'minus'; } //    const func2 = arg => { if (arg > 0) return 'plus'; else return 'minus'; } //3.   const func3 = function(arg1, arg2){ if (arg1 > arg2) return arg1; else return arg2; } //    const func3 = (arg1, arg2) => { if (arg1 > arg2) return arg1; else return arg2; }

अब हम समझते हैं कि कस्टम टेम्प्लेट एपीआई का उपयोग कैसे करें, हम जावास्क्रिप्ट ईएस 6 सिंटैक्स का उपयोग करके टैग ऑपरेशन कोड लिख सकते हैं।

मेरे कोड में एक पिक्सेल लॉन्च करने के लिए विधियाँ हैं, VK openapi.js स्थापित करना, डेटालेयर से उत्पाद डेटा प्राप्त करना (Google की उन्नत इलेक्ट्रॉनिक कॉमर्स साइट कॉन्फ़िगर की गई है), इस डेटा को VKontalte रिटारगेटिंग पिक्सेल में भेजने के लिए आवश्यक रूप में लाने के लिए संसाधित करता है। , और घटना प्रेषण विधि।

पिक्सेल ट्रिगर विधि तीन परिदृश्यों का समर्थन करती है:

पिक्सेल एक ऐसे पृष्ठ पर चलता है जहाँ Openapi.js गायब है।
पिक्सेल उस पृष्ठ पर चलता है जहाँ Openapi.js है, लेकिन यह अभी तक लोड नहीं हुआ है।
पिक्सेल पेज पर Openapi.js लोड के साथ लॉन्च किया गया है।

VKontakte डायनामिक रिटारगेटिंग पिक्सेल के लिए मेरे कस्टम GTM टेम्पलेट का पूरा कोड

 //api const copyFromWindow = require('copyFromWindow'); const setInWindow = require('setInWindow'); const injectScript = require('injectScript'); const callInWindow = require('callInWindow'); const makeTableMap = require('makeTableMap'); const getUrl = require('getUrl'); const getQueryParameters = require('getQueryParameters'); const makeInteger = require('makeInteger'); const makeString = require('makeString'); const callLater = require('callLater'); //    const settings = { event: data.event, pixelIDs: data.pixelIDs, priceListId: data.priceListId, fewPriceLists: data.fewPriceLists, priceListIds: data.priceListIds === undefined ? data.priceListIds : makeTableMap(data.priceListIds,'hostname','priceListId'), ecommerceUse: data.ecommerceUse, eventEcommerce: data.eventEcommerce, siteSearchQueryParam: data.siteSearchQueryParam }; //       const pixel = { //    getPageHostname: () => getUrl('host'), //    VK getVK: () => copyFromWindow('VK'), //    VK setVkAsyncInit: () => { setInWindow('vkAsyncInit', pixel.sendEvent); }, //       getSiteSearchPhrase: () => { if (settings.event === 'view_search') return getQueryParameters(settings.siteSearchQueryParam); else return undefined; }, //      getEventParams: (products, currencyCode, revenue) => { let eventParamsClean= {}; let eventParams = { products: eventProducts.getProductParams(products), category_ids: eventProducts.getCategoryString(products), currency_code: currencyCode, total_price: eventProducts.getTotalPrice(products, revenue), search_string: pixel.getSiteSearchPhrase() }; if (eventParams.products !== undefined) eventParamsClean.products = eventParams.products; if (eventParams.category_ids !== undefined) eventParamsClean.category_ids = eventParams.category_ids; if (eventParams.currency_code !== undefined) eventParamsClean.currency_code = eventParams.currency_code; if (eventParams.total_price !== undefined) eventParamsClean.total_price = eventParams.total_price; if (eventParams.search_string !== undefined) eventParamsClean.search_string = eventParams.search_string; return eventParamsClean; }, //  - getPriceListId: hostname => { if (settings.fewPriceLists) return settings.priceListIds[hostname]; else return settings.priceListId; }, //  openapi.js openapiInit: () => { injectScript('https://vk.com/js/api/openapi.js?159', pixel.setVkAsyncInit(), data.gtmOnFailure, 'vkPixel'); setInWindow('openapiInject', 1); }, //   sendEvent: () => { if (settings.event === 'hit') { settings.pixelIDs.split(',').forEach(p => { callInWindow('VK.Retargeting.Init',p); callInWindow('VK.Retargeting.Hit'); }); } else { const pricelist = pixel.getPriceListId(pixel.getPageHostname()); const name = settings.event; let products = []; if(settings.ecommerceUse) products = name === 'view_home' || name === 'view_category' || name === 'view_search' || name === 'view_other' ? settings.eventEcommerce : settings.eventEcommerce.products; else products = undefined; const currencyCode = settings.ecommerceUse ? settings.eventEcommerce.currencyCode : undefined; const revenue = (settings.ecommerceUse && name === 'purchase') ? settings.eventEcommerce.actionField.revenue : undefined; const eventParams = settings.ecommerceUse ? pixel.getEventParams(products, currencyCode, revenue) : undefined; settings.pixelIDs.split(',').forEach(p => { callInWindow('VK.Retargeting.Init',p); callInWindow('VK.Retargeting.ProductEvent', pricelist, name, eventParams); }); }, //   start: () => { if (pixel.getVK() === undefined && copyFromWindow('openapiInject') !== 1) { pixel.openapiInit(); data.gtmOnSuccess(); } else if (pixel.getVK() === undefined && copyFromWindow('openapiInject') === 1) { if (pixel.count < 50) { callLater(pixel.start); pixel.count++; } else return; } else { pixel.sendEvent(); data.gtmOnSuccess(); }, //   count: 0 }; //       const eventProducts = { //    products   getProductParams: products => { let arr = []; products.forEach(i => { let productParamsClean = {}; let productParams = { id: makeString(i.id), group_id: makeString(i.brand), price: makeInteger(i.price * 100) / 100 }; if (productParams.id !== 'undefined') productParamsClean.id = productParams.id; if (productParams.group_id !== 'undefined') productParamsClean.group_id = productParams.group_id; if (productParams.price !== 0) productParamsClean.price = productParams.price; arr.push(productParamsClean); }); return arr; }, //       'a,b,c'       getCategoryString: products => { let categoryId = ''; let check = []; products.forEach(i => { if(check.indexOf(i.category) === -1) { check.push(i.category); categoryId += ',' + i.category; }); return categoryId.slice(1); }, //     getTotalPrice: (products, revenue) => { let sumPrice = 0; if (revenue !== undefined ) return makeInteger(revenue * 100) / 100; else { products.forEach(i => { if (i.hasOwnProperty('quantity')) sumPrice += (makeInteger(i.price * 100) / 100) * makeInteger(i.quantity); else sumPrice += makeInteger(i.price * 100) / 100; }); return sumPrice; }; //  pixel.start();

अनुमतियाँ टैब

टैग कोड लिखने के बाद, अंतिम चरण बना हुआ है - पृष्ठ के वैश्विक डेटा के साथ बातचीत करने की अनुमति जारी करने के लिए। यह सिर्फ अनुमतियाँ टैब पर किया जाता है।

चूंकि कोड को एक पृथक वातावरण में निष्पादित किया जाता है, और वैश्विक डेटा के साथ इंटरैक्शन एपीआई के माध्यम से होता है, प्रत्येक एपीआई विधि (जहां आवश्यक हो) के लिए हमें कुछ कार्यों के लिए मैन्युअल रूप से अनुमतियाँ निर्दिष्ट करने की आवश्यकता होती है।

यह संभव के रूप में वैश्विक पेज डेटा के साथ काम करने के लिए दृष्टिकोण करने के लिए किया जाता है, और इस तरह हमारे टेम्पलेट के कोड में साइट को "त्रुटि" में डालने की संभावना को कम करता है।

मेरे कोड में उपयोग की जाने वाली एपीआई विधियों के लिए, तीन प्रकार की अनुमतियां जारी की जानी चाहिए:

1. ग्लोबल वेरिएबल्स एक्सेस करता है - हमारे कोड में उपयोग किए जाने वाले ग्लोबल वेरिएबल्स तक पहुंच, लिखना, पढ़ना। चर को मैन्युअल रूप से जोड़ा जाना चाहिए और उनमें से प्रत्येक के लिए संकेत मिलता है कि हम क्या करने की अनुमति देते हैं।

उदाहरण के लिए, VK वैरिएबल को केवल पढ़ा जा सकता है, vkAsyncInit को पढ़ा और फिर से परिभाषित किया जा सकता है, और VK.Retargeting.Hit पद्धति को केवल निष्पादित किया जा सकता है।

2. URL पढ़ता है । यहां आपको यह निर्दिष्ट करना होगा कि URL के किन हिस्सों को प्राप्त करने की अनुमति है। मैं URL के किसी भी हिस्से को प्राप्त करने की अनुमति देता हूं:

लेकिन यदि आप चाहें, तो आप कोई विशिष्ट निर्दिष्ट कर सकते हैं:

3. लिपियों को इंजेक्ट करता है । यहां उन पते को पंजीकृत करना आवश्यक है जिनसे आप बाहरी स्क्रिप्ट डाउनलोड कर सकते हैं। मेरे कोड में, VK के साथ केवल एक स्क्रिप्ट openapi.js भरी हुई है, मैं इसका पता निर्दिष्ट करता हूं:

यह सब है, कस्टम टेम्पलेट सेटअप पूरा हो गया है, आप टेम्पलेट को सहेज सकते हैं और परीक्षण के लिए आगे बढ़ सकते हैं।

निर्मित कस्टम टेम्पलेट पर टैग का अनुकूलन और परीक्षण

एक उदाहरण के रूप में, हम बनाए गए कस्टम टेम्पलेट का उपयोग करके दो "VKontakte" डायनामिक रिटारगेटिंग टैग बनाएंगे: पेजव्यू और addToCart।

पृष्ठ-अवलोकन

हम आवश्यक GTM कंटेनर में जाएंगे, एक नया टैग बनाएंगे, कस्टम अनुभाग में टैग प्रकार VK Pixel चुनें:

टैग के नाम से भरें, ट्रैक किए जाने वाले ईवेंट का चयन करें, हिट चुनें (यह एक मानक पेजव्यू है), फ़ील्ड में "पिक्सेल आईडी" उन दो पिक्सेल की आईडी को इंगित करता है, जिसमें डेटा भेजा जाएगा, और ऑल पेज ट्रिगर सेट करें:

बनाए गए टैग को सेव करें।

addToCart जैसा

किसी उत्पाद को कार्ट में जोड़ने वाली घटना के लिए एक टैग बनाना एक हिट टैग की तुलना में थोड़ा अधिक जटिल होगा।

सबसे पहले, आपको टोकरी में जोड़े जाने वाले सामान को स्थानांतरित करने की आवश्यकता है। जैसा कि मैंने ऊपर लिखा है, यह संभव है कि साइट पर Google के उन्नत ईकॉमर्स कॉन्फ़िगर किए गए हों। इस मामले में, उत्पाद डेटा डेटालेयर से लिया जाता है।

ऐसा करने के लिए, हमें GTM में dataLayer वैरिएबल बनाने की आवश्यकता है, जो addToartart इवेंट के लिए ईकॉमर्स ऑब्जेक्ट को स्टोर करेगा। चर सेटिंग्स इस तरह दिखती हैं:

दूसरे, आपको एक ट्रिगर बनाने की ज़रूरत है जो ईकॉमर्स addToCart ईवेंट होने पर टैग को सक्रिय करेगा (जब एडवर्ट इवेंट होता है तो ट्रिगर डेटालेयर में पुश करते समय टैग को सक्रिय करेगा):

ईकॉमर्स ऑब्जेक्ट और ट्रिगर के साथ एक वैरिएबल बनाने के बाद, आप टैग बनाना शुरू कर सकते हैं:

क्रम में:

ट्रैक की गई घटना के रूप में, कार्ट में जोड़ें का चयन करें।
हम दो पिक्सेल के अल्पविराम से अलग आईडी में भरते हैं जिसमें डेटा स्थानांतरित किया जाना चाहिए।
चेकबॉक्स सेट करें "कई मूल्य सूचियों का उपयोग करें": मास्को और सेंट पीटर्सबर्ग के लिए, हमारे उदाहरण में, विभिन्न मूल्य सूचियों का उपयोग करना आवश्यक है।
मूल्य सूची के साथ तालिका भरें।
चेकबॉक्स सेट करें "उत्पादों और मापदंडों को स्थानांतरित करने के लिए ई-कॉमर्स का उपयोग करें"।
इस ईवेंट के ईकॉमर्स ऑब्जेक्ट में, पहले से बनाए गए वेरिएबल को निर्दिष्ट करें।
हमने इस मामले में मॉनिटर किए गए इवेंट के लिए ट्रिगर सेट किया - AddToCart।
सहेजें।

खनन परीक्षण

VKontakte पर डायनामिक रिटारगेटिंग के पिक्सल के वर्किंग आउट की जाँच करने के लिए, आपको GTM में पूर्वावलोकन मोड को सक्रिय करना होगा, हमारी वेबसाइट पर जाना होगा और ब्राउज़र कंसोल में नेटवर्क सेक्शन को खोलना होगा और फ़िल्टर क्षेत्र में 'आरटीआरजी' दर्ज करना होगा।

उसके बाद, हम पृष्ठ को ताज़ा करते हैं, और हमारे पास दो अनुरोध होने चाहिए - दो पिक्सेल में भेजी गई हिट:

स्थिति 200 का अर्थ है कि अनुरोध सर्वर द्वारा सफलतापूर्वक भेजे और प्राप्त किए जाते हैं।

पूर्वावलोकन जीटीएम विंडो में भी, हम देखते हैं कि हमारे बनाए गए टैग ने पृष्ठ दृश्य घटना के लिए सही ढंग से काम किया है।

कार्ट में जोड़ें घटना की जांच करने के लिए, उत्पाद को कार्ट में जोड़ें, और कंसोल में हमारे पास दो और अनुरोध हैं:

पूर्वावलोकन GTM विंडो में, हम देखते हैं कि दूसरा टैग सफलतापूर्वक काम कर रहा है। डेटालेयर के उत्पाद डेटा को खींचा गया और सही ढंग से संसाधित किया गया, सही मूल्य सूची भी प्रतिस्थापित की गई।

दूसरे होस्ट के लिए, मूल्य सूची को भी सही ढंग से प्रतिस्थापित किया गया है:

अन्य घटनाओं के लिए टैग उसी तरह कॉन्फ़िगर और चेक किए गए हैं।

निष्कर्ष

कस्टम टेम्पलेट GTM के उपयोग के परिचित प्रतिमान को बदल रहे हैं। HTML टैग और JS वैरिएबल के लिए सभी का उपयोग किया जाता है, लेकिन अब एक बढ़िया विकल्प है।

यह एक बार उच्च-गुणवत्ता वाले कस्टम टेम्पलेट बनाने के लिए पर्याप्त है, और फिर कोई भी जो GTM से परिचित है वह इसका उपयोग कर सकता है।

निर्मित टेम्पलेट्स को साझा करने की क्षमता को देखते हुए, मुझे लगता है कि उन्हें उपयोगकर्ताओं के बीच लोकप्रियता हासिल करनी चाहिए।

आप VKontakte कस्टम डायनामिक रिटारगेटिंग पिक्सेल टेम्पलेट डाउनलोड कर सकते हैं, जिसकी हमने इस लेख में जांच की थी।

टेम्पलेट आयात करने के लिए, आपको एक नया कस्टम टेम्पलेट बनाने और मेनू से आयात का चयन करने की आवश्यकता है:

मेरे द्वारा ppc.world के लिए तैयार सामग्री

जीटीएम में कस्टम टेम्पलेट: एक उदाहरण