Tworzenie niestandardowego piksela menedżera tagów Google
Możesz użyć Menedżera tagów Google (GTM) jako niestandardowego piksela do zarządzania pikselami firm zewnętrznych.
Gdy będziesz gotowy(-a) do testowania niestandardowego piksela, możesz użyć rozszerzenia starszej wersji Asystenta tagów Google dla Chrome, aby przetestować niestandardowe piksele. Asystent tagów Google nie działa z niestandardowymi pikselami.
Na tej stronie
Przygotowanie do utworzenia niestandardowego piksela
Zanim utworzysz niestandardowy piksel za pomocą menedżera tagów Google, zapoznaj się z poniższymi informacjami dotyczącymi sposobu konfigurowania piksela:
- Utwórz lub otwórz konto menedżera tagów Google i uzyskaj ID kontenera GTM.
- Ze względów bezpieczeństwa menedżer tagów załadowany do naszego środowiska testowego ma takie same ograniczenia jak wszystkie inne piksele. Dowiedz się więcej o ograniczeniach środowiska testowego pikseli.
Tworzenie niestandardowego piksela menedżera tagów Google
Możesz utworzyć niestandardowy piksel Menedżera tagów Google, aby zarządzać pikselami firm zewnętrznych.
Kroki:
- Otwórz konto menedżera tagów Google i wybierz konto, dla którego chcesz skonfigurować niestandardowy piksel.
- Kliknij opcję Administrator, a następnie Zainstaluj menedżera tagów Google, aby otworzyć kod instalacji.
- Skopiuj blok kodu, który należy do sekcji
head
strony. - Usuń tagi HTML z bloku kodu. Na przykład,
<script></script>
. - Wstaw pozostały kod do nowego niestandardowego piksela Shopify.
- Subskrybowanie zdarzeń klientów i wypychanie do warstwy danych (dataLayer) GTM.
- Aby sprawdzić, w jaki sposób powinien być wyświetlany kod, zapoznaj się z przykładowym niestandardowym pikselem Menedżer tagów Google.
- Skonfiguruj Menedżera tagów Google tak, aby akceptował zdarzenia z niestandardowego piksela.
- Opcjonalnie: Jeśli istnieją już wywołania
dataLayer.push
(event) w plikucheckout.liquid
, zastąp go wywołaniami analytics.publish().
Subskrybuj zdarzenia klientów i przesyłaj je do data layer GTM
Możesz subskrybować zdarzenia klientów za pomocą dataLayer
GTM w kodzie niestandardowego piksela.
Domyślnie dostępny jest zbiór standardowych zdarzeń, które możesz subskrybować. Jeśli jednak chcesz śledzić zdarzenia klientów, które nie są częścią oferty standardowych zdarzeń, możesz opublikować własne niestandardowe zdarzenia z plików szablonów Liquid.
Poniżej przedstawiono przykład subskrypcji standardowego zdarzenia "product_viewed", które oznacza, że ktoś wyświetlił produkt. Po wyzwoleniu zdarzenia jest ono przesyłane do dataLayer
.
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
product_title: event.data?.productVariant?.title,
});
});
W tym przykładzie tytuł produktu jest przekazywany w ładunku zdarzenia. Możesz użyć zmiennej Menedżera tagów Google, aby zarejestrować tytuł produktu z ładunku zdarzenia w wybranym tagu.
Przykładowy niestandardowy piksel Menedżera tagów Google
Poniższy przykład to uproszczona wersja niestandardowego piksela Menedżera tagów Google, która przedstawia sposób wysyłania danych do Menedżera tagów Google. Aby przesłać więcej zdarzeń do dataLayer
, możesz subskrybować więcej standardowych i niestandardowych zdarzeń.
// 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,
});
});
Skonfiguruj Menedżera tagów Google tak, aby akceptował zdarzenia z piksela niestandardowego
Po utworzeniu niestandardowego piksela musisz skonfigurować Menedżera tagów Google tak, aby akceptował zdarzenia z tego piksela. Do tego celu potrzebujesz tagu, wyzwalacza i zmiennych dataLayer
w Menedżerze tagów Google.
Kilka przykładów wybranych standardowych zdarzeń klienta i ich odpowiedników w Menedżerze tagów Google znajduje się w poniższej tabeli:
Zdarzenie Shopify | Wyzwalacz | Zdarzenie GTM |
---|---|---|
payment_info_submitted | Prześlij informacje o płatności | add_payment_info |
checkout_address_info_submitted | Prześlij informacje o wysyłce | add_shipping_info |
product_added_to_cart | Dodaj pozycję do koszyka zakupów | add_to_cart |
checkout_started | Rozpocznij realizację zakupu | begin_checkout |
checkout_completed | Zakończ realizację zakupu | zakup |
product_removed_from_cart | Usuń pozycję z koszyka | remove_from_cart |
cart_viewed | Pokaż koszyk zakupów | view_cart |
product_viewed | Wyświetl stronę szczegółów produktu | view_item |
collection_viewed | Wyświetl listę pozycji | view_item_list |
Parametry zdarzenia tagu GTM muszą być zgodne z oczekiwanymi konwencjami nazewnictwa, aby zdarzenia dataLayer
niestandardowego piksela zostały przetworzone.
Poniżej przedstawiono kilka przykładów wybranych właściwości zdarzeń dataLayer niestandardowego piksela i parametrów zdarzeń Google Analytics 4 (GA4) będących ich odpowiednikami:
Zdarzenia dataLayer niestandardowego piksela | Parametry zdarzenia GA4 |
---|---|
event.data?.checkout?.currencyCode | waluta |
event.data?.checkout?.totalPrice?.amount | value |
event.data?.checkout?.order?.id | transaction_id |
event.data?.checkout?.discountAllocations | kupon |
event.data?.checkout?.shippingLine?.price?.amount | wysyłka |
event.data?.checkout?.totalTax | tax |
event.data?.checkout?.lineItems | pozycje |
Oto przykład, w którym wykorzystane jest zdarzenie checkout_completed:
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,
});
});
Wyzwalacz Menedżera tagów Google jest niestandardowym typem zdarzenia o nazwie checkout_completed. Pole Nazwa zdarzenia w wyzwalaczu musi być zgodne z kluczem zdarzenia w pikselu niestandardowym.
orderId i currency to zmienne używane w Menedżerze tagów Google do rejestrowania danych ze zdarzenia. Można je mapować na zmienną dataLayer
w Menedżerze tagów Google. Każda zmienna zdarzenia wymaga własnej zmiennej dataLayer
. Ustaw wyzwalacz tak, aby uruchamiał się przy wszystkich niestandardowych zdarzeniach.
Utwórz tag, który używa właśnie utworzonego wyzwalacza. W obszarze parametrów zdarzenia dodaj zmienne, które chcesz zarejestrować. W powyższym przykładzie zmienne orderId, currency, price, shippingLine i totalTax są rejestrowane jako zmienne dataLayer
. Przy każdej aktywacji tagu będzie on rejestrować te zmienne dataLayer
wraz ze zdarzeniem.
Pamiętaj, że aby transfer danych mógł zostać wykonany, w Menedżerze tagów Google musi być skonfigurowany co najmniej jeden tag i reguła.
Zastąpienie starych wywołań dataLayer.push(event) przez analytics.publish()
Jeśli masz skonfigurowanego Menedżera tagów Google, musisz zastąpić wywołania dataLayer.push
wywołaniami Shopify.analytics.publish()
. Wywołania dataLayer.push
znajdują się w plikach theme.liquid w sekcji Układ edytora szablonów.
Musisz także zastąpić wywołania dataLayer.push
w pliku checkout.liquid
. Jednak, ponieważ plik checkout.liquid
nie jest kompatybilny z funkcjonalnością Checkout Extensibility, musisz użyć rozszerzenia IU, aby przesłać dane do pikseli internetowych.
Poniżej przedstawiono uproszczony przykład niestandardowego zdarzenia rejestracji w celu otrzymywania e-maili, śledzonego za pomocą zmiennej dataLayer
w plikach theme.liquid.
<script>
dataLayer.push({ event: 'email_signup', email: customer.email });
</script>
W ten sposób wyświetlany jest odpowiednik Shopify, który wypycha dane do Twojego niestandardowego piksela.
<script>
Shopify.analytics.publish('email_signup', {email: customer.email });
</script>
Następnie w kodzie niestandardowego piksela dodaj coś takiego.
analytics.subscribe("email_signup", (event) => {
window.dataLayer.push({
'event': 'email_signup',
'email': event.customData.email,
});
});
Zastąpienie starego dataLayer.push(data)
Menedżer tagów Google ma funkcję, która umożliwia wypychanie stanowego obiektu dataLayer
przy każdym zdarzeniu. Gdy środowisko testowe piksela Shopify nie oferuje równoważnej funkcji, możesz osiągnąć ten sam wynik, tworząc własny obiekt danych i przekazując go do niestandardowych zdarzeń.
Możesz na przykład zdefiniować obiekt "customData" przed opublikowaniem dowolnego z niestandardowych wydarzeń.
<script>
const customData = {email: customer.email}
</script>
Wówczas za każdym razem, gdy chcesz uwzględnić niestandardowe dane, możesz przekazywać je do swojej metody publikowania.
<script>
Shopify.analytics.publish('email_signup', customData);
</script>
Wskazówki dotyczące konfigurowania Google Analytics 4
Możesz skorzystać z poniższych wskazówek dotyczących konfigurowania Google Analytics 4 (GA4), gdy używasz menedżera tagów Google jako niestandardowego piksela.
URL stron oczyszczarki
Gdy GA4 działa w środowisku testowym, możesz zauważyć, że adresy URL stron zawierają informacje o środowisku testowym, w którym działają. Jeśli chcesz usunąć informacje o środowisku testowym z tych adresów URL, możesz wyłączyć automatyczne śledzenie stron GA4, a zamiast tego zaimplementować własne, za pomocą standardowego zdarzenia page_viewed.
analytics.subscribe('page_viewed', (event) => {
window.dataLayer.push({
'event': 'page_viewed',
'page_location': event.context.window.location.href,
'page_title': event.context.document.title,
});
});
Po opublikowaniu własnego zdarzenia w dataLayer
możesz utworzyć tag page_view GA4, który jest wyzwalany dla zdarzenia page_viewed. Najczęściej używa się typu tagu Google Analytics: zdarzenie GA4 i ustawia nazwę zdarzenia na page_view. Po skonfigurowaniu typu tagu i nazwy zdarzenia należy dodać parametr dla page_location i ustawić tę samą wartość, która została przekazana do dataLayer
z niestandardowego piksela.
Rozszerzone pomiary
Podczas ładowania GA4 wewnątrz środowiska testowego piksela Shopify niektóre zdarzenia, które są zwykle automatycznie generowane, będą musiały być skonfigurowane ręcznie. Na przykład, kliknięcia linku wychodzącego w ramach ustawienia rozszerzonych pomiarów GA4 nie mogą być wyzwalane automatycznie ze względów bezpieczeństwa, jeśli używasz niestandardowych pikseli. Możesz jednak samodzielnie zaimplementować zdarzenia rozszerzonych pomiarów GA4 jako zdarzenia niestandardowe.
Poniższy kod zawiera uproszczony przykład śledzenia kliknięć linku wychodzącego.
<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>
Na koniec w GTM utwórz tag GA4, który wysyła kliknięcie linku do GA4, upewniając się, że nazwa zdarzenia to kliknięcie w celu zapewnienia zgodności z nazewnictwem rozszerzonych zdarzeń GA4.
Możesz zapewnić to samo śledzenie dla dowolnych rozszerzonych wskaźników pomiarów Google.
Testuj i debuguj niestandardowy piksel
Kroki:
- Otwórz sklep Shopify w przeglądarce Chrome.
- Dodaj rozszerzenie starszej wersji Asystenta tagów Google dla Chrome do swojej przeglądarki.
- Kliknij ikonę rozszerzenia, a następnie opcję Włącz.
- Przejdź do swojej witryny, a następnie uruchom zdarzenia, które chcesz przetestować.
- W rozszerzeniu kliknij tag Menedżer tagów Google. W sekcji Warstwa danych powinien być wyświetlany ładunek zdarzenia, które zostało wyzwolone.
- W rozszerzeniu znajdują się również inne tagi załadowane przez Menedżera tagów Google. Możesz kliknąć te tagi, aby przejrzeć dane, które zostały do nich wysłane.