„Google Tag Manager“ pasirinktinio pikselio kūrimas
Galite naudoti „Google Tag Manager“ (GTM) kaip pasirinktinį pikselį, kad tvarkytumėte savo trečiųjų šalių pikselius.
Kai būsite pasirengę išbandyti savo GTM pasirinktinį pikselį, naudokite „Shopify“ pikselių pagalbinę priemonę, kad įsitikintumėte, jog visi norimi sekti įvykiai yra pridedami į smėlio dėžę be klaidų.
Taip pat galite naudoti „Google Tag Assistant“ puslapio plėtinį, kad patikrintumėte, kurios „Google“ žymos įkeliamos puslapyje. Tačiau „Google Tag Assistant“ funkcija Šalinti žymos triktis nėra suderinama su pasirinktiniais pikseliais ir neaptinka jokių „Google“ žymų pasirinktiniame pikselyje ar kitų GTM įkeliamų pikselių.
Šiame puslapyje
Pasiruošimas kurti pasirinktinį pikselį
Prieš kurdami pasirinktinį pikselį naudojant „Google Tag Manager“, peržiūrėkite toliau pateiktą informaciją, kad įsitikintumėte, jog suprantate, kaip konfigūruoti pikselį:
- Sukurkite arba atidarykite „Google Tag Manager“ paskyrą ir gaukite GTM konteinerio ID.
- Saugumo sumetimais mūsų smėlio dėžėje įkeltoms žymų tvarkyklėms taikomi tokie patys apribojimai kaip ir bet kuriems kitiems pikseliams. Sužinokite daugiau apie pikselių smėlio dėžės apribojimus.
„Google Tag Manager“ pasirinktinio pikselio kūrimas
Galite sukurti „Google Tag Manager“ pasirinktinį pikselį, kad tvarkytumėte trečiųjų šalių pikselius.
Veiksmai:
- Atidarykite savo „Google Tag Manager“ paskyrą ir pasirinkite paskyrą, kurioje norite nustatyti pasirinktinį pikselį.
- Spustelėkite „Admin“, o tada – „Install Google Tag Manager“, kad atidarytumėte diegimo kodą.
- Nukopijuokite kodo bloką, kuris priklauso puslapio skilčiai
head. - Pašalinkite HTML žymas iš kodo bloko. Pavyzdžiui,
<script></script>. - Įterpkite likusį kodą į naują „Shopify“ pasirinktinį pikselį.
- Prenumeruokite klientų įvykius ir nusiųskite juos į GTM „dataLayer“.
- Kad peržiūrėtumėte, kaip turėtų atrodyti kodas, žr. „Google Tag Manager“ pasirinktinio pikselio pavyzdį.
- Konfigūruokite „Google Tag Manager“, kad priimtų įvykius iš Jūsų pasirinktinio pikselio.
- Pasirinktinai: jei savo
checkout.liquidfaile turite esamųdataLayer.push(event) iškvietų, pakeiskite jas analytics.publish().
Klientų įvykių prenumerata ir siuntimas į GTM duomenų sluoksnį
Galite prenumeruoti klientų įvykius naudodami GTM dataLayer savo pasirinktinio pikselio kode.
Pagal numatytuosius nustatymus yra standartinių įvykių rinkinys, kurį galite prenumeruoti. Tačiau, jei norite sekti klientų įvykius, kurie nepriklauso standartinių įvykių rinkiniui, galite publikuoti savo pasirinktinius įvykius iš „Liquid“ šablonų failų.
Toliau pateikiamas standartinio įvykio „product_viewed“ prenumeratos pavyzdys. Šis įvykis nurodo, kada kas nors peržiūri produktą. Kai įvykis suveikia, jis nusiunčiamas į dataLayer.
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
product_title: event.data?.productVariant?.title,
});
});Šiame pavyzdyje produkto pavadinimas perduodamas įvykio duomenyse. Galite naudoti „Google Tag Manager“ kintamąjį, kad gautumėte produkto pavadinimą iš įvykio duomenų pasirinktoje žymoje.
„Google Tag Manager“ pasirinktinio pikselio pavyzdys
Toliau pateiktas pavyzdys yra supaprastinta „Google Tag Manager“ pasirinktinio pikselio versija, kuri parodo, kaip siųsti duomenis į „Google Tag Manager“. Kad į savo dataLayer nusiųstumėte daugiau įvykių, galite prenumeruoti daugiau standartinių ir pasirinktinių įvykių.
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
//Initialize GTM tag
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');
//Google Consent Mode v2
gtag('consent', 'update', {
'ad_storage': 'granted',
'analytics_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
});
//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("payment_info_submitted", (event) => {
window.dataLayer.push({
event: "payment_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_shipping_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_shipping_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_address_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_address_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_contact_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_contact_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_started", (event) => {
window.dataLayer.push({
event: "checkout_started",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("product_added_to_cart", (event) => {
window.dataLayer.push({
event: "product_added_to_cart",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
price: event.data?.cartLine?.merchandise?.price?.amount,
currency: event.data?.cartLine?.merchandise?.id,
product_title: event.data?.cartLine?.merchandise?.product?.title,
quantity: event.data?.cartLine?.quantity,
total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
});
});
analytics.subscribe("cart_viewed", (event) => {
window.dataLayer.push({
event: "cart_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
total_cost: event.data?.cart?.cost?.totalAmount?.amount,
quantity: event.data?.cart?.totalQuantity,
cart_id: event.data?.cart?.id,
});
});
analytics.subscribe("page_viewed", (event) => {
window.dataLayer.push({
event: "page_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
page_title: event.context.document.title,
});
});
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
product_id: event.data?.productVariant?.product?.id,
product_title: event.data?.productVariant?.title,
product_sku: event.data?.productVariant?.sku,
});
});
analytics.subscribe("search_submitted", (event) => {
window.dataLayer.push({
event: "search_submitted",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
query: event.data?.searchResult?.query,
});
});
analytics.subscribe("collection_viewed", (event) => {
window.dataLayer.push({
event: "collection_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
collection_id: event.data?.collection?.id,
collection_title: event.data?.collection?.title,
});
});„Google Tag Manager“ konfigūravimas priimti įvykius iš Jūsų pasirinktinio pikselio
Sukūrę pasirinktinį pikselį, turite sukonfigūruoti „Google Tag Manager“, kad jis priimtų įvykius iš Jūsų pasirinktinio pikselio. Tam Jums reikės žymos, paleidiklio ir dataLayer kintamųjų programoje „Google Tag Manager“.
Toliau esančioje lentelėje pateikiami standartinių klientų įvykių pavyzdžiai ir jų atitikmenys programoje „Google Tag Manager“:
| „Shopify“ įvykis | Paleidiklis | GTM įvykis |
|---|---|---|
| payment_info_submitted | Mokėjimo informacijos pateikimas | add_payment_info |
| checkout_address_info_submitted | Pristatymo informacijos pateikimas | add_shipping_info |
| product_added_to_cart | Prekės įdėjimas į pirkinių krepšelį | add_to_cart |
| checkout_started | Atsiskaitymo pradėjimas | begin_checkout |
| checkout_completed | Atsiskaitymo užbaigimas | purchase |
| product_removed_from_cart | Prekės pašalinimas iš krepšelio | remove_from_cart |
| cart_viewed | Pirkinių krepšelio peržiūra | view_cart |
| product_viewed | Produkto informacijos puslapio peržiūra | view_item |
| collection_viewed | Prekių sąrašo peržiūra | view_item_list |
GTM žymos įvykių parametrai turi atitikti numatomus pavadinimų suteikimo susitarimus, kad būtų apdoroti Jūsų pasirinktinio pikselio dataLayer įvykiai.
Toliau pateikiami keli pasirinktinio pikselio „dataLayer“ įvykių ypatybių ir jų atitinkamų „Google Analytics 4“ (GA4) įvykių parametrų pavyzdžiai:
Pasirinktinio pikselio dataLayer įvykiai | GA4 įvykių parametrai |
|---|---|
| event.data?.checkout?.currencyCode | currency |
| event.data?.checkout?.totalPrice?.amount | value |
| event.data?.checkout?.order?.id | transaction_id |
| event.data?.checkout?.discountAllocations | coupon |
| event.data?.checkout?.shippingLine?.price?.amount | shipping |
| event.data?.checkout?.totalTax | tax |
| event.data?.checkout?.lineItems | items |
Štai pavyzdys su šiuo checkout_completed įvykiu:
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
price: event.data.checkout.totalPrice.amount,
shippingLine: event.data.checkout.shippingLine.price.amount,
totalTax: event.data.checkout.totalTax,
});
});Google Tag Manager paleidiklis yra pasirinktinio įvykio tipas, kurio įvykio pavadinimas yra checkout_completed. Paleidiklio laukas Event name turi sutapti su event raktu Jūsų pasirinktiniame pikselyje.
orderId ir currency yra kintamieji, kuriuos naudojate Google Tag Manager įvykio duomenims fiksuoti. Juos galima susieti su dataLayer kintamuoju Google Tag Manager. Kiekvienam įvykio kintamajam reikia savo dataLayer kintamojo. Nustatykite, kad paleidiklis suveiktų visiems pasirinktiniams įvykiams.
Sukurkite žymą, kuri naudoja ką tik sukurtą paleidiklį. Prie įvykio parametrų pridėkite kintamuosius, kuriuos norite fiksuoti. Ankstesniame pavyzdyje orderId, currency, price, shippingLine ir totalTax būtų nustatyti kaip dataLayer kintamieji. Kiekvieną kartą, kai žyma suveikia, ji kartu su įvykiu fiksuos šiuos dataLayer kintamuosius.
Atminkite, kad Google Tag Manager priemonėje turi būti nustatyta bent viena žyma ir paleidiklis, kad vyktų duomenų perdavimas.
Senų dataLayer.push(event) iškvietų pakeitimas analytics.publish()
Jei anksčiau nustatėte Google Tag Manager, tuomet turite pakeisti savo dataLayer.push iškvietas Shopify.analytics.publish() iškvietomis. Savo dataLayer.push iškvietas galite rasti savo theme.liquid failuose, temos redaktoriaus skiltyje Layout.
Taip pat turite pakeisti dataLayer.push iškvietas faile checkout.liquid. Tačiau, kadangi checkout.liquid nesuderinamas su Shopify Extensions, turite naudoti UI plėtinį, kad nusiųstumėte duomenis į interneto pikselius.
Toliau pateikiamas supaprastintas pasirinktinio prisiregistravimo el. paštu įvykio, kuris sekamas naudojant dataLayer theme.liquid failuose, pavyzdys:
<script>
dataLayer.push({ event: 'email_signup', email: customer.email });
</script>Atitinkamas Shopify variantas atrodo taip ir nusiunčia duomenis į Jūsų pasirinktinį pikselį:
<script>
Shopify.analytics.publish('email_signup', {email: customer.email });
</script>Tada savo pasirinktinio pikselio kode pridėtumėte kažką panašaus į tai:
analytics.subscribe("email_signup", (event) => {
window.dataLayer.push({
'event': 'email_signup',
'email': event.customData.email,
});
});Senų dataLayer.push(data) pakeitimas
Google Tag Manager turi funkciją, kuri leidžia su kiekvienu įvykiu nusiųsti būsenos dataLayer objektą. Nors Shopify pikselių smėlio dėžė neturi lygiavertės funkcijos, galite pasiekti tą patį rezultatą sukurdami savo duomenų objektą ir perduodami jį į pasirinktinius įvykius.
Pavyzdžiui, apibrėžkite „customData“ objektą prieš paskelbiant bet kokius Jūsų pasirinktinius įvykius:
<script>
const customData = {email: customer.email}
</script>Tada, kai tik norite įtraukti savo pasirinktinius duomenis, perduokite juos į savo „publish“ metodą:
<script>
Shopify.analytics.publish('email_signup', customData);
</script>Patarimai, kaip nustatyti Google Analytics 4
Atsižvelkite į šiuos patarimus, kaip nustatyti Google Analytics 4 (GA4), kai naudojate Google Tag Manager kaip pasirinktinį pikselį.
Švaresni puslapių URL
Kai GA4 veikia smėlio dėžėje, galite pastebėti, kad puslapių URL yra informacijos apie smėlio dėžę, kurioje jis veikia. Jei norite pašalinti smėlio dėžės informaciją iš tų URL, galite išjungti automatinį GA4 puslapių sekimą ir vietoje to įdiegti savo, naudodami standartinį page_viewed įvykį.
analytics.subscribe('page_viewed', (event) => {
window.dataLayer.push({
'event': 'page_viewed',
'page_location': event.context.window.location.href,
'page_title': event.context.document.title,
});
});Paskelbę savo įvykį dataLayer, galite sukurti GA4 page_view žymą, kuri suveikia įvykus page_viewed įvykiui. Dažniausiai galite naudoti Google Analytics: GA4 Event žymos tipą ir nustatyti įvykio pavadinimą (Event Name) į page_view. Nustatę žymos tipą ir įvykio pavadinimą, turėtumėte pridėti parametrą page_location ir nustatyti jo reikšmę į tą pačią reikšmę, kurią perdavėte į savo dataLayer iš savo pasirinktinio pikselio.
Patobulintas matavimas
Įkeliant GA4 Shopify pikselių smėlio dėžėje, kai kuriuos įvykius, kurie paprastai nustatomi automatiškai, reikės nustatyti rankiniu būdu. Pavyzdžiui, išeinančių nuorodų paspaudimai, kurie yra GA4 patobulinto matavimo nustatymo dalis, dėl saugumo priežasčių negali būti suaktyvinti automatiškai, kai naudojami pasirinktiniai pikseliai. Tačiau GA4 patobulinto matavimo įvykius galite įdiegti patys kaip pasirinktinius įvykius.
Toliau pateiktame kode pateikiamas supaprastintas pavyzdys, kaip sekti išeinančių nuorodų paspaudimus:
<script>
function detectOutboundLink() {
// add your logic for determining if a link click is outbound
// if the link click is outbound then publish it
if (isOutboundLink) {
Shopify.analytics.publish('outbound_link', { link_url: link_url });
}
}
</script>Galiausiai, GTM sukurkite GA4 žymą, kuri siunčia nuorodos paspaudimą į GA4, užtikrindami, kad įvykio pavadinimas būtų click, jog atitiktų GA4 patobulintą įvykių pavadinimų sistemą.
Tokį patį sekimą galite pasiekti bet kuriai iš Google patobulinto matavimo metrikų.
Pasirinktinio pikselio testavimas ir derinimas
Kai būsite pasirengę išbandyti savo GTM pasirinktinį pikselį, naudokite „Shopify“ pikselių pagalbinę priemonę, kad įsitikintumėte, jog visi norimi sekti įvykiai yra pridedami į smėlio dėžę be klaidų.
Taip pat galite naudoti „Google Tag Assistant“ puslapio plėtinį, kad patikrintumėte, kurios „Google“ žymos įkeliamos puslapyje. Tačiau „Google Tag Assistant“ funkcija Šalinti žymos triktis nėra suderinama su pasirinktiniais pikseliais ir neaptinka jokių „Google“ žymų pasirinktiniame pikselyje ar kitų GTM įkeliamų pikselių.