🕺 🧔🏾 🖖🏾 Template khusus di GTM: contoh 🤴🏿 🎵 📓

Pada akhir Mei, Google memperkenalkan fitur baru di Google Tag Manager (GTM): Template Kustom atau template khusus. Mari kita lihat mengapa diperlukan, bagaimana cara menggunakannya, apa perbedaan dari tag HTML dan variabel JavaScript.

Sebagai contoh, pertimbangkan untuk membuat Template Kustom untuk penargetan ulang piksel dinamis VKontakte dan selanjutnya menyesuaikan tag GTM melaluinya.

Kata-kata Sederhana Tentang Template Kustom
Membuat Template Kustom
• Tab Info
• tab Bidang
• tab Kode
• tab Izin
Kustomisasi dan pengujian tag pada Template Kustom yang dibuat
• Tampilan halaman
• AddToCart
• Uji penambangan
Kesimpulan

Kata-kata Sederhana Tentang Template Kustom

Template Kustom adalah template yang digunakan pengguna untuk membuat tag atau variabel baru. GTM memiliki template yang sudah jadi (di bagian Featured atau Recommended), misalnya, tag Google Analytics, Google Optimize, dan lainnya. Sekarang kita bisa melengkapinya dengan templat kita. Setelah dibuat, mereka akan muncul di tab Kustom:

Perbedaan utama dari tag HTML dan variabel JS adalah bahwa ketika pengguna membuat tag atau variabel sesuai dengan templat yang sudah jadi, ia tidak berinteraksi dengan kode JS.

Kode untuk templat pengguna ditulis oleh pengembang atau analis web pada tahap pembuatannya. Kemudian, saat membuat tag atau variabel sesuai dengan templat pengguna, semua interaksi dilakukan melalui antarmuka (yang juga dikonfigurasi saat membuat templat pengguna):

Karenanya, dibandingkan dengan menulis tag HTML atau variabel JS, menyesuaikan tag atau variabel sesuai templat pengguna menjadi lebih mudah, karena ini tidak memerlukan pengetahuan dan keterampilan dalam bekerja dengan JavaScript.

Kelebihan besar templat kustom lainnya adalah kemungkinan "menempatkan" situs dikurangi oleh urutan besarnya karena kesalahan dalam kode JS tag.

Dalam contoh kami, untuk mengonfigurasi tag penargetan ulang dinamis "VKontakte" Anda tidak perlu lagi menghubungi pengembang - semuanya dapat diatur secara independen, bahkan transfer data tentang barang (dengan Google e-commerce lanjutan yang dikonfigurasikan di situs), hanya memiliki pengalaman dengan GTM.

Membuat Template Kustom

Karena kita membuat tag templat, kita perlu pergi ke bagian Templat dan klik tombol Baru di bagian Templat Tag.

Setelah itu, Editor Template terbuka:

Di sisi kiri editor ada jendela pengaturan, di sisi kanan ada jendela pratinjau dan konsol. Ada empat tab di jendela pengaturan yang diperlukan untuk membuat dan bekerja dengan templat.

Tab info

Informasi pada tag diisi pada tab ini: nama, deskripsi, ikon. Ini adalah informasi yang akan kita lihat ketika membuat tag baru di daftar template:

Ada persyaratan untuk ikon tag: format PNG, JPEG atau GIF, resolusi minimal 64x64 piksel dan ukuran tidak lebih dari 50 KB.

Fields Tab

Bagian ini menciptakan antarmuka templat kami. Antarmuka terdiri dari berbagai bidang dan bentuk yang digunakan pengguna untuk berinteraksi pada tahap pembuatan tag atau variabel baru.

Di masa depan, informasi yang dimasukkan pengguna saat membuat tag menggunakan antarmuka digunakan dalam kode templat.

Untuk menambahkan elemen baru, klik tombol Tambah Bidang. Jendela untuk memilih jenis elemen muncul:

GTM memungkinkan Anda memilih jenis elemen antarmuka berikut:

kotak teks
menu tarik-turun
kotak centang ;
sakelar
tabel sederhana , di sini Anda dapat mengedit setiap sel.
tabel diperpanjang , Anda hanya dapat mengedit baris, jenis tabel ini nyaman digunakan untuk membuat kamus dari pasangan nilai kunci;
grup elemen , memungkinkan Anda untuk mengelompokkan beberapa jenis menjadi grup;
pintasan digunakan untuk menambahkan teks ke antarmuka, itu tidak mengharuskan pengguna untuk memasukkan data apa pun.

Setelah menambahkan elemen, Anda harus memberikannya nama yang ramah, yang kemudian akan digunakan dalam kode. Ini adalah semacam nama variabel - itu harus dapat dimengerti dan mengungkapkan esensi dari elemen antarmuka yang dibuat. Misalnya, nama "ID" tidak berarti sesuatu yang spesifik, tetapi nama "pixelIDs" sudah menunjukkan bahwa ID piksel yang dimasukkan oleh pengguna disimpan dalam elemen ini:

Selanjutnya, buka pengaturan masing-masing elemen dan aktifkan properti yang diperlukan.
Dalam situasi yang berbeda, properti yang berbeda dari elemen antarmuka diperlukan, jadi secara default semuanya tersembunyi dan kita perlu mengaktifkan yang diperlukan sekarang:

Untuk berbagai jenis elemen, properti yang tersedia berbeda, saya akan menunjukkan yang paling sering digunakan, yang hampir semua elemen:

1. Nama tampilan . Ini adalah nama yang akan dilihat pengguna di antarmuka saat membuat tag:

2. Nilai contoh . Ini adalah petunjuk kepada pengguna tentang nilai apa yang harus dimasukkan di bidang:

3. Teks bantuan . Ini adalah teks yang akan dilihat pengguna jika mereka mengarahkan kursor ke ikon bantuan elemen:

4. Aturan untuk verifikasi data . Di properti ini, Anda bisa menetapkan aturan tertentu untuk memeriksa data yang dimasukkan oleh pengguna di bidang, dan jika perlu, teks kesalahan yang muncul saat Anda mencoba menyimpan tag dengan data yang tidak lulus tes.

Misalnya, Anda dapat menentukan bahwa bidang tersebut harus diisi. Contoh kedua: Anda perlu mendapatkan alamat email dari pengguna, maka Anda dapat memverifikasi bahwa data yang dimasukkan oleh pengguna harus sesuai dengan ekspresi reguler . * @. * * .. * .

Untuk menentukan teks kesalahan yang muncul jika data yang dimasukkan tidak mematuhi aturan verifikasi, Anda harus mengaktifkan pengaturan aturan lanjutan:

Selain itu, dalam pengaturan lanjutan, Anda dapat menentukan kondisi di mana aturan ini diaktifkan (bidang Aktifkan Kondisi).

5. Ketentuan pencantuman . Ini adalah kondisi di mana pengguna akan memiliki elemen antarmuka ini.

Misalnya, agar tidak membebani template dengan elemen antarmuka, Anda dapat membuat tampilan elemen yang diperlukan ketika kotak centang dipilih. Yaitu, anggaplah jika pengguna ingin mengonfigurasi transfer data produk dalam piksel (ini dimungkinkan dengan situs e-commerce Google lanjutan yang dikonfigurasikan di situs), lalu ia memilih kotak centang "Gunakan dataLayer untuk mentransfer data produk", dan setelah memeriksa kotak itu, elemen muncul di antarmuka tag diperlukan untuk mengkonfigurasi transfer semacam itu. Jika kotak tidak dicentang, maka tidak ada elemen di antarmuka.

Saya perhatikan bahwa di sini perlu untuk menunjukkan nama elemen, yang harus ditugaskan kepadanya segera setelah menambahkan.

Saat Anda menambahkan pengaturan dan membuat antarmuka, semua perubahan dapat segera dilihat dan diuji di jendela pratinjau:

Tab Kode

Tab ini adalah editor kode.

Kode Template Kustom GTM ditulis dalam striped down JavaScript ES6 dan berjalan di lingkungan yang terisolasi di mana semua komunikasi dengan data global (yaitu, langsung dengan halaman) dilakukan melalui API. Tidak ada objek global, seperti jendela atau dokumen, di dalamnya, masing-masing, metode biasa juga. Misalnya, konstruktor (Objek baru dan sejenisnya), setTimeout, parseInt, hapus, dll. - semua ini tidak akan berfungsi di Template Khusus.

Tetapi ada API untuk semua ini. Dan oleh karena itu, penulisan kode untuk Templat Kustom harus dimulai dengan fakta bahwa kami mendefinisikan API yang akan kami gunakan dalam kode kami:

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

Lihat Bantuan Pengembang Google untuk daftar lengkap API dengan dokumentasi terperinci.

Saya akan menunjukkan kepada Anda contoh cara bekerja dengan API:

Deskripsi tindakan	Js klasik	API Template Kustom
Output Konsol	console.log ('Hai');	logToConsole ('Hai');
Atur timer	setTimeout (fungsi, 100);	callLater (fungsi);
Konversi ke string	String (1234);	makeString (1234);
Konversi ke integer	parseInt ('1234', 10);	makeInteger ('1234');
Host halaman	window.location.hostname	getUrl ('host');

Seperti yang dapat Anda lihat dari tabel contoh, setelah mendefinisikan API, Anda harus menggunakannya daripada konstruksi JS standar.

Setelah kami mendefinisikan API, diinginkan untuk mendefinisikan objek dengan pengaturan yang dimasukkan pengguna. Ini juga dapat dilakukan setelah, misalnya, selama kode yang dapat dieksekusi, meminta data yang diperlukan dari pengaturan pengguna. Tetapi jika kita mendefinisikan objek pengaturan dari awal, maka bekerja dengan kode menjadi lebih mudah dan lebih dimengerti, karena semua pengaturan pengguna disimpan dalam objek yang terpisah.

Untuk mendapatkan data dari elemen antarmuka, Anda harus menggunakan konstruk data.

{{nama elemen}}:

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

Catatan: jika Anda meneruskan undefined ke metode makeTableMap, itu akan menyebabkan kesalahan skrip, jadi saya menggunakan konstruk dengan operator ternary (disingkat if-else construct) untuk menyaring skrip tersebut.

Tentang metode makeTableMap.

Jika antarmuka menggunakan tabel yang diperluas, maka data di dalamnya disimpan dalam bentuk ini:

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

Setelah diproses dengan metode makeTableMap, data menjadi objek biasa dengan pasangan nilai kunci:

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

Persyaratan lain untuk kode Templat Kustom: jika tag berhasil dijalankan, Anda harus memanggil metode data.gtmOnSuccess (), dan jika terjadi kesalahan, panggil metode data.gtmOnFailure ().

Misalnya, dalam kode saya, metode data.gtmOnSuccess () dipanggil setelah permintaan berhasil dikirim, dan metode data.gtmOnFailure () dipanggil jika unduhan gagal pada halaman skrip eksternal VK openapi.js.

Setelah mendefinisikan API dan mendefinisikan objek dengan pengaturan, Anda dapat mulai menulis algoritme untuk mengetahui pikselnya.

Hal utama yang perlu diingat di sini adalah:

• Jika Anda perlu mendapatkan variabel global - gunakan metode copyFromWindow API.

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

• Jika Anda perlu mengatur variabel global, kami menggunakan metode API setInWindow.

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

• Jika Anda perlu menjalankan fungsi global, kami menggunakan metode API panggilanInWindow.

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

• Jika Anda perlu menambahkan skrip eksternal ke halaman - gunakan metode API injectScript.

 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

• Jika Anda perlu mendapatkan URL (atau bagian dari URL itu) - gunakan metode getUrl API.

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

Seperti yang saya tulis di atas, Template Kustom mendukung JS ES6. Dianjurkan untuk menggunakan sintaks ini, karena lebih pendek kode dan membuatnya lebih mudah dibaca, dan karya JS lebih mudah diprediksi dan mirip dengan bahasa pemrograman lainnya.

Lebih lanjut tentang Sintaks JS ES6

Hal utama yang diinginkan untuk digunakan adalah fungsi panah dan deklarasi const dan biarkan variabel bukan var.

Variabel yang dideklarasikan melalui const adalah konstanta yang nilainya tidak dapat diubah.

Variabel yang dideklarasikan melalui let berbeda dari variabel yang dideklarasikan melalui var sebagai berikut:

biarkan tidak ditambahkan ke objek jendela global;
mari visibilitas terbatas pada blok deklarasi;
variabel yang dideklarasikan melalui let tidak dapat dideklarasikan ulang.

Fungsi panah adalah singkatan dari fungsi biasa:

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

Sekarang setelah kami memahami cara menggunakan API Templat Kustom, kami dapat menulis kode operasi tag menggunakan sintaksis JavaScript ES6.

Kode saya berisi metode untuk meluncurkan piksel, memasang VK openapi.js, mengambil data produk dari dataLayer (dengan situs perdagangan elektronik canggih Google dikonfigurasi), memproses data ini untuk membawanya ke dalam bentuk yang diperlukan untuk mengirim ke piksel penargetan ulang VKontakte , dan metode pengiriman acara.

Metode pemicu piksel mendukung tiga skenario:

Pixel berjalan pada halaman di mana openapi.js hilang.
Pixel berjalan pada halaman di mana ada openapi.js, tetapi belum dimuat.
Pixel diluncurkan pada halaman dengan openapi.js dimuat.

Kode lengkap templat GTM khusus saya untuk VKontakte piksel penargetan ulang dinamis

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

Tab Izin

Setelah menulis kode tag, tahap terakhir tetap - untuk mengeluarkan izin untuk berinteraksi dengan data global halaman. Ini dilakukan hanya pada tab Izin.

Karena kode dieksekusi dalam lingkungan yang terisolasi, dan interaksi dengan data global terjadi melalui API, untuk setiap metode API (jika perlu) kita perlu secara manual menentukan izin untuk tindakan tertentu.

Hal ini dilakukan untuk mendekati pekerjaan dengan data halaman global sebanyak mungkin, dan dengan demikian meminimalkan kemungkinan "menempatkan" situs dalam kesalahan dalam kode templat kami.

Untuk metode API yang digunakan dalam kode saya, tiga jenis izin harus dikeluarkan:

1. Mengakses Variabel Global - baca, tulis, jalankan akses ke variabel global yang digunakan dalam kode kita. Variabel harus ditambahkan secara manual dan untuk masing-masing menunjukkan apa yang kami izinkan untuk dilakukan.

Misalnya, variabel VK hanya dapat dibaca, vkAsyncInit dapat dibaca dan didefinisikan ulang, dan metode VK.Retargeting.Hit hanya dapat dieksekusi.

2. Membaca URL . Di sini Anda harus menentukan bagian URL yang diizinkan untuk diterima. Saya mengizinkan bagian URL diterima:

Tetapi jika Anda ingin, Anda dapat menentukan spesifik:

3. Menyuntikkan Script . Di sini perlu mendaftarkan alamat dari mana Anda dapat mengunduh skrip eksternal. Dalam kode saya, hanya satu skrip dengan VK openapi.js yang dimuat, saya tentukan alamatnya:

Itu saja, pengaturan Template Kustom selesai, Anda dapat menyimpan template dan melanjutkan ke pengujian.

Kustomisasi dan pengujian tag pada Template Kustom yang dibuat

Sebagai contoh, kami akan membuat dua tag penargetan ulang dinamis "VKontakte" menggunakan Template Khusus yang dibuat: tampilan halaman dan addToCart.

Tampilan halaman

Kami akan masuk ke wadah GTM yang diperlukan, membuat tag baru, pilih jenis tag VK Pixel di bagian Kustom:

Kami mengisi nama tag, pilih acara yang akan dilacak, pilih Hit (ini adalah tampilan halaman standar), di bidang "ID Piksel", tunjukkan ID dua piksel yang akan dikirim datanya, dipisahkan dengan koma dan atur pemicu Semua Halaman:

Simpan tag yang dibuat.

AddToCart

Membuat tag untuk acara yang menambahkan produk ke troli akan sedikit lebih rumit daripada tag Hit.

Pertama, Anda perlu mentransfer barang yang ditambahkan ke keranjang. Seperti yang saya tulis di atas, ini dimungkinkan dengan e-commerce canggih Google yang dikonfigurasi di situs. Dalam hal ini, data produk diambil dari dataLayer.

Untuk melakukan ini, kita perlu membuat variabel dataLayer di GTM, yang akan menyimpan objek e-niaga untuk acara addToCart. Pengaturan variabel terlihat seperti ini:

Kedua, Anda perlu membuat pemicu yang akan mengaktifkan tag ketika acara addToCart e-niaga terjadi (pemicu akan mengaktifkan tag saat mendorong dataLayer dengan acara addToCart):

Setelah membuat variabel dengan objek e-niaga dan pemicu, Anda dapat mulai membuat tag:

Dalam rangka:

Sebagai acara yang dilacak, pilih Tambahkan Ke Troli.
Kami mengisi ID yang dipisahkan oleh koma dua piksel tempat data harus ditransfer.
Tetapkan kotak centang "Gunakan beberapa daftar harga": untuk Moskow dan St. Petersburg, dalam contoh kami, perlu menggunakan daftar harga yang berbeda.
Isi tabel dengan daftar harga.
Setel kotak centang "Gunakan e-niaga untuk mentransfer produk dan parameter".
Di objek e-niaga acara ini, tentukan variabel yang dibuat sebelumnya.
Kami mengatur pemicu untuk acara yang dipantau, dalam hal ini - AddToCart.
Simpan.

Tes penambangan

Untuk memeriksa cara kerja piksel penargetan ulang dinamis di VKontakte, Anda perlu mengaktifkan mode Pratinjau di GTM, buka situs web kami dan buka bagian Jaringan di konsol browser dan masukkan 'rtrg' di bidang Filter:

Setelah itu, kami me-refresh halaman, dan kami harus memiliki dua permintaan - acara Hit dikirim dalam dua piksel:

Status 200 berarti permintaan berhasil dikirim dan diterima oleh server.

Juga di jendela Pratinjau GTM, kami melihat bahwa tag yang kami buat bekerja dengan benar untuk acara Tampilan Halaman.

Untuk memeriksa acara Tambahkan Ke Keranjang, tambahkan produk ke keranjang, dan di konsol kami memiliki dua permintaan lagi:

Di jendela Pratinjau GTM, kita melihat bahwa tag kedua berhasil. Data produk dari dataLayer ditarik dan diproses dengan benar, daftar harga yang benar juga diganti.

Untuk host kedua, daftar harga juga diganti dengan benar:

Tag untuk acara lain dikonfigurasikan dan diperiksa dengan cara yang sama.

Kesimpulan

Template khusus mengubah paradigma yang umum digunakan dalam GTM. Semua orang terbiasa dengan tag HTML dan variabel JS, tetapi sekarang ada alternatif yang bagus.

Cukup untuk membuat templat kustom berkualitas tinggi sekali, dan siapa pun yang terbiasa dengan GTM dapat menggunakannya.

Mengingat kemampuan untuk berbagi templat yang dibuat, saya pikir mereka harus mendapatkan popularitas di kalangan pengguna.

Anda dapat mengunduh template piksel penargetan ulang dinamis kustom VKontakte, yang kami periksa di artikel ini.

Untuk mengimpor template, Anda perlu membuat Template Kustom baru dan pilih Impor dari menu:

Materi yang disiapkan oleh saya untuk ppc.world

Template khusus di GTM: contoh