📞 🤯 🤠 قوالب مخصصة في GTM: مثال 🧢 ➡️ 🌩️

في نهاية شهر مايو ، قدمت Google ميزة جديدة في Google Tag Manager (GTM): قوالب مخصصة أو قوالب مخصصة. دعونا نرى سبب الحاجة إليها ، وكيفية استخدامها ، وما الاختلافات بين علامات HTML ومتغيرات JavaScript.

على سبيل المثال ، فكر في إنشاء قالب مخصص لـ VKontakte لاستعادة الحيوية للبكسل وتخصيص علامات GTM من خلاله.

كلمات بسيطة حول قوالب مخصصة
إنشاء قالب مخصص
• علامة التبويب معلومات
• علامة التبويب الحقول
• علامة التبويب رمز
• علامة التبويب أذونات
تخصيص واختبار العلامة على القالب المخصص المنشأ
• مشاهدة الصفحة
• AddToCart
• اختبار التعدين
استنتاج

كلمات بسيطة حول قوالب مخصصة

القوالب المخصصة هي قوالب يمكن للمستخدمين من خلالها إنشاء علامات أو متغيرات جديدة. لدى GTM قوالب جاهزة (في القسم المميز أو الموصى به) ، على سبيل المثال ، علامة Google Analytics و Google Optimize وغيرها. الآن يمكننا استكمالها بقوالبنا. بمجرد إنشائها ، سوف تظهر في علامة التبويب مخصص:

يتمثل الاختلاف الرئيسي بين علامات HTML ومتغيرات JS في أنه عندما ينشئ المستخدم علامة أو متغيرًا وفقًا لقالب جاهز ، فإنه لا يتفاعل مع رمز JS.

تتم كتابة رمز قالب المستخدم بواسطة المطور أو محلل الويب في مرحلة إنشائه. بعد ذلك ، عند إنشاء علامة أو متغير وفقًا لقالب المستخدم ، يتم تنفيذ كل التفاعل من خلال الواجهة (التي يتم تكوينها أيضًا عند إنشاء قالب مستخدم):

وفقًا لذلك ، بالمقارنة مع كتابة علامة HTML أو متغير JS ، يصبح تخصيص علامة أو متغير وفقًا لقالب المستخدم أمرًا أسهل من حيث الحجم ، لأن هذا لا يتطلب معرفة ومهارات في العمل مع JavaScript.

إضافة كبيرة أخرى من القوالب المخصصة هي أن احتمال "وضع" موقع يتم تقليله بترتيب حجم بسبب خطأ في رمز JS للعلامة.

في المثال الخاص بنا ، لتكوين علامة الاستهداف الديناميكي "VKontakte" ، لم تعد بحاجة إلى الاتصال بالمطورين - يمكن إعداد كل شيء بشكل مستقل ، حتى نقل البيانات حول البضائع (مع تكوين التجارة الإلكترونية المتقدمة من Google على الموقع) ، مع تجربة فقط مع GTM.

إنشاء قالب مخصص

نظرًا لأننا نقوم بإنشاء قالب علامة ، نحتاج إلى الانتقال إلى قسم "النماذج" والنقر فوق الزر "جديد" في قسم "قوالب العلامات".

بعد ذلك ، يفتح محرر القوالب:

على الجانب الأيسر من المحرر توجد نافذة إعدادات ، وعلى الجانب الأيمن هناك نافذة معاينة ووحدة تحكم. توجد أربع علامات تبويب في نافذة الإعدادات ضرورية لإنشاء القالب والعمل به.

علامة تبويب المعلومات

يتم ملء المعلومات الموجودة على العلامة في علامة التبويب هذه: الاسم والوصف والرمز. هذه هي المعلومات التي سنراها عند إنشاء علامة جديدة في قائمة القوالب:

هناك متطلبات لرمز العلامة: تنسيق PNG أو JPEG أو GIF بدقة 64 × 64 بكسل على الأقل ولا يزيد حجمها عن 50 كيلوبايت.

علامة تبويب الحقول

ينشئ هذا القسم واجهة القالب الخاص بنا. تتكون الواجهة من عدة حقول وأشكال يتفاعل معها المستخدم في مرحلة إنشاء علامة أو متغير جديد.

في المستقبل ، يتم استخدام المعلومات التي أدخلها المستخدم عند إنشاء العلامة باستخدام الواجهة في رمز القالب.

لإضافة عنصر جديد ، انقر فوق الزر "إضافة حقل". تظهر نافذة تحديد نوع العنصر:

تتيح لك GTM تحديد الأنواع التالية من عناصر الواجهة:

مربع النص
القائمة المنسدلة
خانة الاختيار
التبديل.
جدول بسيط ، هنا يمكنك تعديل كل خلية.
جدول ممتد ، يمكنك فقط تحرير صف ، هذا النوع من الجدول مناسب لاستخدامه لإنشاء قاموس من أزواج القيمة الرئيسية ؛
مجموعة من العناصر ، يسمح لك بتجميع عدة أنواع في مجموعة ؛
يستخدم الاختصار لإضافة نص إلى الواجهة ، ولا يتطلب من المستخدم إدخال أي بيانات.

بعد إضافة عنصر ، ستحتاج إلى إعطائه اسمًا مألوفًا ، والذي سيتم استخدامه بعد ذلك في الكود. هذا هو نوع من الاسم المتغير - يجب أن يكون مفهومًا ويكشف جوهر عنصر الواجهة الذي تم إنشاؤه. على سبيل المثال ، لا يعني الاسم "ID" أي شيء محدد ، لكن الاسم "pixelIDs" يظهر بالفعل أنه يتم تخزين معرفات البكسل التي أدخلها المستخدم في هذا العنصر:

بعد ذلك ، انتقل إلى إعدادات كل عنصر وقم بتنشيط الخصائص الضرورية.
في المواقف المختلفة ، تكون الخصائص المختلفة لعنصر الواجهة مطلوبة ، وبالتالي فهي كلها مخفية ، ونحن بحاجة إلى تنشيط الخصائص المطلوبة الآن:

بالنسبة لأنواع مختلفة من العناصر ، تختلف الخصائص المتاحة ، سأشير إلى العناصر الأكثر استخدامًا ، وهي كلها عناصر تقريبًا:

1. اسم العرض . هذا هو الاسم الذي سيراه المستخدم في الواجهة عند إنشاء العلامة:

2. قيمة المثال . هذا تلميح للمستخدم حول القيم التي يجب إدخالها في الحقل:

3. نص المساعدة . هذا هو النص الذي سيرى المستخدم ما إذا كان يحوم فوق أيقونة تعليمات العنصر:

4. قواعد التحقق من البيانات . في هذه الخاصية ، يمكنك تعيين قواعد معينة للتحقق من البيانات التي أدخلها المستخدم في الحقل ، وإذا لزم الأمر ، نص الخطأ الذي يظهر عند محاولة حفظ علامة مع البيانات التي لم تنجح في الاختبار.

على سبيل المثال ، يمكنك تحديد أنه يجب ملء الحقل. المثال الثاني: تحتاج إلى الحصول على عنوان بريد إلكتروني من المستخدم ، ثم يمكنك التحقق من أن البيانات التي أدخلها المستخدم يجب أن تتطابق مع التعبير العادي . * @. * \ .. * .

لتحديد نص الخطأ الذي يظهر إذا كانت البيانات المدخلة لا تتوافق مع قواعد التحقق ، تحتاج إلى تنشيط إعدادات القاعدة المتقدمة:

أيضًا ، في الإعدادات المتقدمة ، يمكنك تحديد الشروط التي يتم بموجبها تنشيط هذه القاعدة (حقل تمكين الشرط).

5. شروط الإدراج . هذه هي الشروط التي بموجبها سيكون للمستخدم عنصر الواجهة هذا.

على سبيل المثال ، حتى لا يتم تحميل القالب بعناصر واجهة ، يمكنك إظهار العناصر الضرورية عند تحديد خانة الاختيار. بمعنى أنه إذا كان المستخدم يريد تكوين نقل بيانات المنتج بالبكسل (هذا ممكن مع موقع التجارة الإلكترونية المتقدمة من Google الذي تم تكوينه على الموقع) ، ثم حدد خانة الاختيار "استخدام dataLayer لنقل بيانات المنتج" ، وبعد تحديد المربع ، تظهر العناصر في واجهة العلامة المطلوبة لتكوين مثل هذا النقل. إذا لم يتم تحديد المربع ، فلن تكون هناك عناصر في الواجهة.

وألاحظ أنه من الضروري هنا الإشارة إلى اسم العنصر ، الذي كان يجب تعيينه مباشرة بعد الإضافة.

عند إضافة الإعدادات وإنشاء واجهة ، يمكن عرض جميع التغييرات على الفور واختبارها في نافذة المعاينة:

علامة تبويب الرمز

علامة التبويب هذه هي محرر رمز.

تتم كتابة شفرة قوالب GTM المخصصة في JavaScript ES6 ويتم تشغيلها في بيئة معزولة حيث تتم جميع الاتصالات مع البيانات العالمية (أي ، مباشرة مع الصفحة) من خلال API. لا توجد كائنات عمومية ، مثل النافذة أو الوثيقة ، على التوالي ، بالطريقة المعتادة أيضًا. على سبيل المثال ، المنشئات (كائن جديد وما شابه) ، setTimeout ، parseInt ، delete ، إلخ. - لن يعمل كل هذا في "القالب المخصص".

ولكن هناك API لكل هذا. وبالتالي ، يجب أن تبدأ كتابة التعليمات البرمجية للقالب المخصص بحقيقة أننا نحدد واجهات برمجة التطبيقات التي سنستخدمها في الكود الخاص بنا:

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

راجع مساعدة مطوري Google للحصول على قائمة كاملة بواجهات برمجة التطبيقات مع وثائق مفصلة.

سأريك أمثلة لكيفية العمل مع واجهة برمجة التطبيقات:

وصف العمل	شبيبة الكلاسيكية	قالب مخصص API
إخراج وحدة التحكم	console.log ('مرحبًا') ؛	logToConsole ("مرحبا") ؛
ضبط الموقت	setTimeout (وظيفة ، 100) ؛	callLater (وظيفة) ؛
تحويل إلى سلسلة	سلسلة (1234) ؛	makeString (1234) ؛
التحويل إلى عدد صحيح	parseInt ('1234'، 10)؛	makeInteger ('1234') ؛
مضيف الصفحة	window.location.hostname	getUrl ('المضيف') ؛

كما ترى من جدول المثال ، بعد تحديد واجهة برمجة التطبيقات ، يجب عليك استخدامه بدلاً من بنيات JS القياسية.

بعد تعريف API ، من المستحسن تعريف كائن بالإعدادات التي أدخلها المستخدم. يمكن أن يتم ذلك أيضًا ، على سبيل المثال ، أثناء التعليمات البرمجية القابلة للتنفيذ ، وطلب البيانات اللازمة من إعدادات المستخدم. ولكن إذا حددنا كائن الإعدادات من البداية ، يصبح العمل باستخدام الكود أسهل وأكثر قابلية للفهم ، حيث يتم تخزين جميع إعدادات المستخدم في كائن منفصل.

للحصول على البيانات من عنصر واجهة ، يجب عليك استخدام بنية البيانات.

{{اسم العنصر}}:

 //    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 ، فسيؤدي ذلك إلى حدوث خطأ في البرنامج النصي ، لذا فإنني أستخدم إنشاءًا مع عامل تشغيل ثلاثي (سجل مختصر لملف if-else) لتصفية هذه البرامج النصية.

حول طريقة makeTableMap.

إذا كانت الواجهة تستخدم جدولًا ممتدًا ، فسيتم تخزين البيانات الموجودة به في هذا النموذج:

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

بعد المعالجة باستخدام طريقة makeTableMap ، تصبح البيانات كائنًا عاديًا مع أزواج قيمة المفتاح:

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

مطلب آخر لرمز القالب المخصص: إذا تم تنفيذ العلامة بنجاح ، يجب عليك استدعاء الأسلوب data.gtmOnSuccess () ، وفي حالة حدوث خطأ ، اتصل بالطريقة data.gtmOnFailure ().

على سبيل المثال ، في الكود الخاص بي ، يتم استدعاء طريقة data.gtmOnSuccess () بعد إرسال الطلب بنجاح ، ويتم استدعاء طريقة data.gtmOnFailure () في حالة فشل التنزيل في صفحة البرنامج النصي الخارجية VK 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 API.

 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.

كما كتبت أعلاه ، يدعم Custom Template JS ES6. من المستحسن استخدام بناء الجملة هذا ، لأنه يقصر الكود ويجعله أكثر قابلية للقراءة ، وعمل JS أكثر قابلية للتنبؤ به ويشبه لغات البرمجة الأخرى.

المزيد عن JS ES6 Syntax

الشيء الرئيسي الذي يُفضل استخدامه هو وظائف السهم والإعلانات من const والسماح للمتغيرات بدلاً من var.

المتغير المعلن عبر const هو ثابت لا يمكن تغيير قيمته.

يختلف المتغير المصرح به خلال let عن المتغير المعلن خلال var كما يلي:

اسمحوا لا تضاف إلى كائن نافذة عمومية.
دعنا نقتصر الرؤية على كتلة الإعلان ؛
لا يمكن إعادة تعريف المتغيرات التي تم الإعلان عنها عبر let.

وظائف السهم هي اختصار للوظائف المعتادة:

 //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; }

الآن وقد فهمنا كيفية استخدام واجهة برمجة تطبيقات Custom Template ، يمكننا كتابة رمز تشغيل العلامة باستخدام بناء جملة JavaScript ES6.

تحتوي التعليمات البرمجية الخاصة بي على طرق لإطلاق بكسل ، وتثبيت VK openapi.js ، واستعادة بيانات المنتج من dataLayer (مع تكوين موقع التجارة الإلكترونية المتقدمة من Google) ، ومعالجة هذه البيانات لإحضارها في النموذج الضروري لإرسالها إلى بكسلات إعادة تكوين VKontakte ، وطريقة إرسال الحدث.

تدعم طريقة المشغل pixel ثلاثة سيناريوهات:

يتم تشغيل البكسل على صفحة حيث openapi.js مفقودة.
يتم تشغيل البكسل على الصفحة حيث يوجد openapi.js ، لكنه لم يتم تحميله بعد.
يتم إطلاق البكسل على الصفحة مع تحميل openapi.js.

الشفرة الكاملة لقالب GTM المخصص لـ VKontakte بكسل لإعادة الاستهداف الديناميكي

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

علامة تبويب الأذونات

بعد كتابة رمز العلامة ، تظل المرحلة النهائية - لإصدار أذونات للتفاعل مع البيانات العامة للصفحة. يتم ذلك فقط في علامة التبويب أذونات.

نظرًا لأنه يتم تنفيذ التعليمات البرمجية في بيئة معزولة ، ويتم التفاعل مع البيانات العامة من خلال واجهة برمجة التطبيقات ، ولكل طريقة API (عند الضرورة) ، نحتاج إلى تحديد الأذونات يدويًا لإجراءات معينة.

يتم ذلك من أجل التعامل مع العمل مع بيانات الصفحة العالمية بأقصى قدر ممكن من التفكير ، وبالتالي تقليل فرص "وضع" الموقع في خطأ في رمز القالب الخاص بنا.

بالنسبة لأساليب API المستخدمة في الكود ، يجب إصدار ثلاثة أنواع من الأذونات:

1. الوصول إلى المتغيرات العالمية - قراءة وكتابة وتنفيذ إمكانية الوصول إلى المتغيرات العالمية المستخدمة في التعليمات البرمجية الخاصة بنا. يجب إضافة المتغيرات يدويًا وتشير كل منها إلى ما نسمح به.

على سبيل المثال ، يمكن قراءة المتغير VK فقط ، ويمكن قراءة vkAsyncInit وإعادة تعريفه ، ويمكن تنفيذ طريقة VK.Retargeting.Hit فقط.

2. يقرأ URL . هنا يجب عليك تحديد أجزاء عنوان URL المسموح بتلقيها. أسمح باستلام أي أجزاء من عنوان URL:

ولكن إذا كنت ترغب في ذلك ، يمكنك تحديد أي:

3. حقن البرامج النصية . من الضروري هنا تسجيل العناوين التي يمكنك من خلالها تنزيل البرامج النصية الخارجية. في الكود ، يتم تحميل نص واحد فقط به VK openapi.js ، أقوم بتحديد عنوانه:

هذا كل شيء ، اكتمال إعداد القالب المخصص ، يمكنك حفظ القالب والمتابعة إلى الاختبار.

تخصيص واختبار العلامة على القالب المخصص المنشأ

على سبيل المثال ، سنقوم بإنشاء علامتي إعادة توجيه ديناميكية "VKontakte" باستخدام "القوالب المخصصة": pageview و addToCart.

مشاهدة صفحة

سنذهب إلى حاوية GTM اللازمة ، وننشئ علامة جديدة ، وحدد نوع العلامة VK Pixel في القسم Custom:

املأ اسم العلامة ، وحدد الحدث المراد تتبعه ، وحدد Hit (هذا عرض صفحة قياسي) ، في الحقل "Pixel ID" ، يشير إلى معرف البكسلين اللذين سيتم إرسال البيانات إليهما ، واضبط مشغل All Pages:

حفظ العلامة التي تم إنشاؤها.

AddToCart

سيكون إنشاء علامة لحدث ما بإضافة منتج إلى السلة أكثر تعقيدًا من علامة Hit.

أولاً ، تحتاج إلى نقل البضائع التي تمت إضافتها إلى السلة. كما كتبت أعلاه ، هذا ممكن مع Google التجارة الإلكترونية المتقدمة التي تم تكوينها على الموقع. في هذه الحالة ، يتم أخذ بيانات المنتج من dataLayer.

للقيام بذلك ، نحتاج إلى إنشاء متغير dataLayer في GTM ، والذي سيخزن كائن التجارة الإلكترونية لحدث addToCart. تبدو الإعدادات المتغيرة كما يلي:

ثانياً ، تحتاج إلى إنشاء مشغل من شأنه تنشيط العلامة عند حدوث حدث addToCart للتجارة الإلكترونية (يقوم المشغل بتنشيط العلامة عند الضغط في dataLayer عند حدوث الحدث addToCart):

بعد إنشاء متغير بكائن التجارة الإلكترونية ومشغل ، يمكنك البدء في إنشاء العلامة:

بالترتيب:

كحدث متعقب ، حدد Add To Cart.
نحن نملأ المعرف المفصول بفواصل وهو بكسلان يجب نقل البيانات إليه.
قم بتعيين مربع الاختيار "استخدام قوائم أسعار متعددة": بالنسبة لموسكو وسانت بطرسبرغ ، في مثالنا ، من الضروري استخدام قوائم أسعار مختلفة.
املأ الجدول بقوائم الأسعار.
قم بتعيين مربع الاختيار "استخدام التجارة الإلكترونية لنقل المنتجات والمعلمات".
في كائن التجارة الإلكترونية لهذا الحدث ، حدد المتغير الذي تم إنشاؤه مسبقًا.
قمنا بتعيين المشغل لهذا الحدث المراقبة ، في هذه الحالة - AddToCart.
حفظ.

اختبار التعدين

للتحقق من العمل خارج بكسل إعادة التوجيه الديناميكي على VKontakte ، تحتاج إلى تنشيط وضع Preview في GTM ، والانتقال إلى موقعنا على شبكة الإنترنت ، وفتح قسم الشبكة في وحدة تحكم المتصفح وإدخال "rtrg" في حقل Filter:

بعد ذلك ، نقوم بتحديث الصفحة ، ويجب أن يكون لدينا طلبان - حدث Hit الذي تم إرساله بالبكسل اثنين:

الحالة 200 تعني أن الطلبات يتم إرسالها واستلامها بواسطة الخادم بنجاح.

أيضًا في نافذة معاينة GTM ، نرى أن العلامة التي تم إنشاؤها تعمل بشكل صحيح لحدث عرض الصفحة.

للتحقق من حدث Add To Cart ، أضف المنتج إلى العربة ، وفي وحدة التحكم لدينا طلبان آخران:

في نافذة معاينة GTM ، نرى أن العلامة الثانية عملت بنجاح. تم سحب بيانات المنتج من dataLayer ومعالجتها بشكل صحيح ، كما تم استبدال قائمة الأسعار الصحيحة.

بالنسبة للمضيف الثاني ، يتم أيضًا استبدال قائمة الأسعار بشكل صحيح:

يتم تكوين العلامات للأحداث الأخرى والتحقق بنفس الطريقة.

استنتاج

تقوم القوالب المخصصة بتغيير النموذج المألوف لاستخدام GTM. الجميع معتادون على علامات HTML ومتغيرات JS ، ولكن يوجد الآن بديل رائع.

يكفي إنشاء قالب مخصص عالي الجودة مرة واحدة ، ومن ثم يمكن لأي شخص مطلع على GTM استخدامه.

بالنظر إلى القدرة على مشاركة القوالب التي تم إنشاؤها ، أعتقد أنها يجب أن تكتسب شعبية بين المستخدمين.

يمكنك تنزيل قالب بكسل إعادة تكوين الديناميكي المخصص في فكونتاكتي ، والذي درسناه في هذه المقالة.

لاستيراد قالب ، تحتاج إلى إنشاء قالب مخصص جديد وتحديد استيراد من القائمة:

المواد التي أعدتها لي ل ppc.world

قوالب مخصصة في GTM: مثال