Βοήθεια
Σύνδεση

Δημιουργία προσαρμοσμένου εικονοστοιχείου Google Tag Manager

Μπορείτε να χρησιμοποιήσετε το Google Tag Manager (GTM) ως προσαρμοσμένο εικονοστοιχείο για τη διαχείριση των εικονοστοιχείων τρίτων.

Όταν είστε έτοιμοι να δοκιμάσετε το προσαρμοσμένο εικονοστοιχείο GTM, χρησιμοποιήστε το Shopify Pixel Helper για να βεβαιωθείτε ότι όλα τα συμβάντα που θέλετε να παρακολουθείτε προστίθενται στο sandbox χωρίς σφάλματα.

Μπορείτε επίσης να χρησιμοποιήσετε την επέκταση σελίδας Google Tag Assistant για να ελέγξετε ποιες ετικέτες Google φορτώνονται στη σελίδα. Ωστόσο, η δυνατότητα `Αντιμετώπιση προβλημάτων ετικέτας` του Google Tag Assistant δεν είναι συμβατή με τα προσαρμοσμένα εικονοστοιχεία και δεν ανιχνεύει ετικέτες Google σε ένα προσαρμοσμένο εικονοστοιχείο ή άλλα εικονοστοιχεία που φορτώνονται από το GTM.

Σε αυτή τη σελίδα

Προετοιμασία για τη δημιουργία προσαρμοσμένου εικονοστοιχείου

Πριν δημιουργήσετε ένα προσαρμοσμένο εικονοστοιχείο χρησιμοποιώντας το Google Tag Manager, ελέγξτε τις παρακάτω πληροφορίες για να βεβαιωθείτε ότι κατανοείτε πώς να διαμορφώσετε το εικονοστοιχείο σας:

Δημιουργία προσαρμοσμένου εικονοστοιχείου Google Tag Manager

Μπορείτε να δημιουργήσετε ένα προσαρμοσμένο εικονοστοιχείο Google Tag Manager για να διαχειριστείτε τα εικονοστοιχεία τρίτων.

Βήματα:

  1. Ανοίξτε τον λογαριασμό σας στο Google Tag Manager και επιλέξτε τον λογαριασμό με τον οποίο θέλετε να ρυθμίσετε ένα προσαρμοσμένο εικονοστοιχείο.
  2. Κάντε κλικ στην επιλογή Διαχείριση και, στη συνέχεια, κάντε κλικ στην επιλογή Εγκατάσταση του Google Tag Manager για να ανοίξετε τον κώδικα εγκατάστασης.
  3. Αντιγράψτε το μπλοκ κώδικα που ανήκει στην ενότητα head μιας σελίδας.
  4. Αφαιρέστε τις ετικέτες HTML από το μπλοκ κώδικα. Για παράδειγμα, <script></script>.
  5. Εισαγάγετε τον υπόλοιπο κώδικα σε ένα νέο Προσαρμοσμένο Pixel του Shopify.
  6. Κάντε εγγραφή στα συμβάντα πελατών και προωθήστε τα στο dataLayer του GTM.
  7. Για να ελέγξετε πώς θα πρέπει να εμφανίζεται ο κώδικας, ανατρέξτε στο παράδειγμα προσαρμοσμένου pixel του Google Tag Manager.
  8. Διαμορφώστε το Google Tag Manager ώστε να δέχεται συμβάντα από το Προσαρμοσμένο Pixel σας.
  9. Προαιρετικά: Αν έχετε υπάρχουσες κλήσεις dataLayer.push(event) στο αρχείο σας checkout.liquid, τότε αντικαταστήστε τις με το analytics.publish().

Εγγραφή σε συμβάντα πελατών και προώθηση στο data layer του GTM

Μπορείτε να κάνετε εγγραφή στα συμβάντα πελατών χρησιμοποιώντας το dataLayer του GTM στον κώδικα του προσαρμοσμένου pixel σας.

Από προεπιλογή, υπάρχει ένα σύνολο από τυπικά συμβάντα στα οποία μπορείτε να εγγραφείτε. Ωστόσο, εάν θέλετε να παρακολουθείτε συμβάντα πελατών που δεν αποτελούν μέρος των τυπικών συμβάντων, τότε μπορείτε να δημοσιεύσετε τα δικά σας προσαρμοσμένα συμβάντα από αρχεία προτύπων Liquid.

Παρακάτω ακολουθεί ένα παράδειγμα εγγραφής στο τυπικό συμβάν «product_viewed», το οποίο υποδεικνύει πότε κάποιος βλέπει ένα προϊόν. Όταν ενεργοποιείται το συμβάν, προωθείται στο dataLayer.

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    product_title: event.data?.productVariant?.title,
  });
});

Σε αυτό το παράδειγμα, ο τίτλος του προϊόντος μεταβιβάζεται στο ωφέλιμο φορτίο του συμβάντος. Μπορείτε να χρησιμοποιήσετε μια μεταβλητή του Google Tag Manager για να καταγράψετε τον τίτλο του προϊόντος από το ωφέλιμο φορτίο του συμβάντος στην ετικέτα της επιλογής σας.

Παράδειγμα προσαρμοσμένου pixel του Google Tag Manager

Το παρακάτω παράδειγμα είναι μια απλοποιημένη έκδοση ενός προσαρμοσμένου pixel του Google Tag Manager που δείχνει πώς να στέλνετε δεδομένα στο Google Tag Manager. Για να προωθήσετε περισσότερα συμβάντα στο dataLayer σας, μπορείτε να εγγραφείτε σε περισσότερα τυπικά και προσαρμοσμένα συμβάντα.

// 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 για την αποδοχή συμβάντων από το Προσαρμοσμένο Pixel σας

Αφού δημιουργήσετε το προσαρμοσμένο pixel σας, πρέπει να διαμορφώσετε το Google Tag Manager ώστε να δέχεται συμβάντα από αυτό. Για να το κάνετε αυτό, χρειάζεστε μια ετικέτα, ένα στοιχείο ενεργοποίησης και μεταβλητές dataLayer στο Google Tag Manager.

Ορισμένα παραδείγματα επιλεγμένων τυπικών συμβάντων πελατών και των αντιστοίχων τους στο Google Tag Manager παρατίθενται στον παρακάτω πίνακα:

Λίστα με τυπικά συμβάντα πελατών του Shopify για χρήση με pixel, σε σύγκριση με τα αντίστοιχα συμβάντα πελατών στο Google Tag Manager, καθώς και το στοιχείο ενεργοποίησης που απαιτείται για την ενεργοποίηση των συμβάντων.
Συμβάν ShopifyΣτοιχείο ενεργοποίησηςΣυμβάν GTM
payment_info_submittedΥποβολή στοιχείων πληρωμήςadd_payment_info
checkout_address_info_submittedΥποβολή στοιχείων αποστολήςadd_shipping_info
product_added_to_cartΠροσθήκη κομματιού στο καλάθι αγορώνadd_to_cart
checkout_startedΈναρξη ολοκλήρωσης αγοράςbegin_checkout
checkout_completedΟλοκλήρωση της αγοράςpurchase
product_removed_from_cartΚατάργηση κομματιού από το καλάθιremove_from_cart
cart_viewedΠροβολή καλαθιού αγορώνview_cart
product_viewedΠροβολή σελίδας λεπτομερειών προϊόντοςview_item
collection_viewedΠροβολή λίστας κομματιώνview_item_list

Οι παράμετροι συμβάντων της ετικέτας GTM πρέπει να ταιριάζουν με τις αναμενόμενες συμβάσεις ονομασίας για να είναι δυνατή η επεξεργασία των συμβάντων dataLayer του προσαρμοσμένου pixel σας.

Ορισμένα παραδείγματα επιλεγμένων ιδιοτήτων συμβάντων του dataLayer προσαρμοσμένου pixel και οι αντίστοιχες παράμετροι συμβάντων του Google Analytics 4 (GA4) είναι τα εξής:

Λίστα συμβάντων dataLayer προσαρμοσμένου pixel που χρησιμοποιούν τη σύμβαση ονομασίας του GA4
Συμβάντα dataLayer προσαρμοσμένου pixelΠαράμετροι συμβάντων GA4
event.data?.checkout?.currencyCodecurrency
event.data?.checkout?.totalPrice?.amountvalue
event.data?.checkout?.order?.idtransaction_id
event.data?.checkout?.discountAllocationscoupon
event.data?.checkout?.shippingLine?.price?.amountshipping
event.data?.checkout?.totalTaxtax
event.data?.checkout?.lineItemsitems

Ακολουθεί ένα παράδειγμα με χρήση του παρακάτω συμβάντος 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,
  });
});

Το στοιχείο ενεργοποίησης του Google Tag Manager είναι ένας προσαρμοσμένος τύπος συμβάντος με το όνομα συμβάντος checkout_completed. Το πεδίο Όνομα συμβάντος στο στοιχείο ενεργοποίησης πρέπει να αντιστοιχεί στο κλειδί event στο προσαρμοσμένο σας εικονοστοιχείο.

Τα orderId και currency είναι οι μεταβλητές που χρησιμοποιείτε στο Google Tag Manager για την καταγραφή των δεδομένων από το συμβάν. Μπορούν να αντιστοιχιστούν σε μια μεταβλητή dataLayer στο Google Tag Manager. Κάθε μεταβλητή συμβάντος απαιτεί τη δική της μεταβλητή dataLayer. Ρυθμίστε το στοιχείο ενεργοποίησης ώστε να εκτελείται για όλα τα προσαρμοσμένα συμβάντα.

Δημιουργήστε μια ετικέτα που χρησιμοποιεί το στοιχείο ενεργοποίησης που μόλις δημιουργήσατε. Στην ενότητα «Παράμετροι συμβάντος», προσθέστε τις μεταβλητές που θέλετε να καταγράψετε. Στο παραπάνω παράδειγμα, τα orderId, currency, price, shippingLine και totalTax θα ορίζονταν ως μεταβλητές dataLayer. Κάθε φορά που εκτελείται η ετικέτα, θα καταγράφει αυτές τις μεταβλητές dataLayer μαζί με το συμβάν.

Σημειώστε ότι πρέπει να έχει ρυθμιστεί τουλάχιστον μία ετικέτα και ένα στοιχείο ενεργοποίησης στο Google Tag Manager για να πραγματοποιηθεί η μεταφορά δεδομένων.

Αντικατάσταση παλιών κλήσεων dataLayer.push(event) με analytics.publish()

Αν έχετε ήδη ρυθμίσει το Google Tag Manager, τότε πρέπει να αντικαταστήσετε τις κλήσεις dataLayer.push με κλήσεις Shopify.analytics.publish(). Μπορείτε να βρείτε τις κλήσεις dataLayer.push στα αρχεία σας theme.liquid, στην ενότητα Διάταξη του προγράμματος επεξεργασίας θεμάτων.

Πρέπει επίσης να αντικαταστήσετε τις κλήσεις dataLayer.push στο checkout.liquid. Ωστόσο, επειδή το checkout.liquid δεν είναι συμβατό με τα Shopify Extensions, πρέπει να χρησιμοποιήσετε μια επέκταση διεπαφής χρήστη για να προωθήσετε δεδομένα στα εικονοστοιχεία ιστού.

Παρακάτω ακολουθεί ένα απλοποιημένο παράδειγμα ενός προσαρμοσμένου συμβάντος εγγραφής μέσω email που παρακολουθείται με χρήση του dataLayer σε αρχεία theme.liquid:

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

Το αντίστοιχο στο Shopify εμφανίζεται με αυτόν τον τρόπο, το οποίο προωθεί τα δεδομένα στο προσαρμοσμένο εικονοστοιχείο σας:

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

Στη συνέχεια, στον κώδικα του προσαρμοσμένου εικονοστοιχείου σας θα προσθέτατε κάτι παρόμοιο με το εξής:

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

Αντικατάσταση του παλιού dataLayer.push(data)

Το Google Tag Manager διαθέτει μια λειτουργία που σας επιτρέπει να προωθείτε ένα αντικείμενο dataLayer με διατήρηση κατάστασης σε κάθε συμβάν. Αν και το pixel sandbox του Shopify δεν περιλαμβάνει αντίστοιχη λειτουργία, μπορείτε να επιτύχετε το ίδιο αποτέλεσμα δημιουργώντας το δικό σας αντικείμενο δεδομένων και μεταβιβάζοντάς το σε προσαρμοσμένα συμβάντα.

Για παράδειγμα, ορίστε ένα αντικείμενο «customData», προτού δημοσιευτεί οποιοδήποτε από τα προσαρμοσμένα σας συμβάντα:

<script>
  const customData = {email: customer.email}
</script>

Στη συνέχεια, όποτε θέλετε να συμπεριλάβετε τα προσαρμοσμένα δεδομένα σας, μεταβιβάστε τα στη μέθοδο publish:

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Συμβουλές για τη ρύθμιση του Google Analytics 4

Λάβετε υπόψη τις παρακάτω συμβουλές για τη ρύθμιση του Google Analytics 4 (GA4) όταν χρησιμοποιείτε το Google Tag Manager ως προσαρμοσμένο εικονοστοιχείο.

Πιο καθαρά URL σελίδων

Όταν το GA4 εκτελείται σε περιβάλλον sandbox, ενδέχεται να παρατηρήσετε ότι τα URL των σελίδων περιλαμβάνουν πληροφορίες σχετικά με το sandbox στο οποίο λειτουργεί. Αν θέλετε να καταργήσετε τις πληροφορίες του sandbox από αυτά τα URL, τότε μπορείτε να απενεργοποιήσετε την αυτόματη παρακολούθηση σελίδων του GA4 και αντ' αυτού να υλοποιήσετε τη δική σας, χρησιμοποιώντας το τυπικό συμβάν 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,
  });
});

Αφού δημοσιεύσετε το δικό σας συμβάν στο dataLayer, μπορείτε να δημιουργήσετε μια ετικέτα page_view του GA4 που ενεργοποιείται στο συμβάν page_viewed. Στις περισσότερες περιπτώσεις, μπορείτε να χρησιμοποιήσετε τον τύπο ετικέτας Google Analytics: Συμβάν GA4 και να ορίσετε το Όνομα συμβάντος σε page_view. Αφού ορίσετε τον τύπο ετικέτας και το όνομα του συμβάντος, θα πρέπει να προσθέσετε μια παράμετρο για το page_location και να ορίσετε την τιμή στην ίδια τιμή που έχετε μεταβιβάσει στο dataLayer από το προσαρμοσμένο εικονοστοιχείο σας.

Βελτιωμένη μέτρηση

Κατά τη φόρτωση του GA4 εντός του pixel sandbox του Shopify, ορισμένα συμβάντα που κανονικά συνάγονται αυτόματα θα πρέπει να ρυθμιστούν μη αυτόματα. Για παράδειγμα, τα κλικ σε εξερχόμενους συνδέσμους, ως μέρος της ρύθμισης Βελτιωμένης μέτρησης του GA4, δεν μπορούν να ενεργοποιηθούν αυτόματα για λόγους ασφαλείας κατά τη χρήση προσαρμοσμένων εικονοστοιχείων. Ωστόσο, είναι δυνατόν να υλοποιήσετε μόνοι σας τα συμβάντα βελτιωμένης μέτρησης του GA4 ως προσαρμοσμένα συμβάντα.

Ο κώδικας που παρέχεται παρακάτω περιλαμβάνει ένα απλοποιημένο παράδειγμα παρακολούθησης κλικ σε εξερχόμενους συνδέσμους:

<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>

Τέλος, στο GTM, δημιουργήστε μια ετικέτα GA4 που στέλνει το κλικ συνδέσμου στο GA4, διασφαλίζοντας ότι το όνομα του συμβάντος είναι click, ώστε να αντιστοιχεί στην ονοματολογία συμβάντων βελτιωμένης μέτρησης του GA4.

Μπορείτε να επιτύχετε την ίδια παρακολούθηση για οποιοδήποτε από τα ποσοτικά μεγέθη βελτιωμένης μέτρησης της Google.

Δοκιμή και εντοπισμός σφαλμάτων του προσαρμοσμένου εικονοστοιχείου σας

Όταν είστε έτοιμοι να δοκιμάσετε το προσαρμοσμένο εικονοστοιχείο GTM, χρησιμοποιήστε το Shopify Pixel Helper για να βεβαιωθείτε ότι όλα τα συμβάντα που θέλετε να παρακολουθείτε προστίθενται στο sandbox χωρίς σφάλματα.

Μπορείτε επίσης να χρησιμοποιήσετε την επέκταση σελίδας Google Tag Assistant για να ελέγξετε ποιες ετικέτες Google φορτώνονται στη σελίδα. Ωστόσο, η δυνατότητα `Αντιμετώπιση προβλημάτων ετικέτας` του Google Tag Assistant δεν είναι συμβατή με τα προσαρμοσμένα εικονοστοιχεία και δεν ανιχνεύει ετικέτες Google σε ένα προσαρμοσμένο εικονοστοιχείο ή άλλα εικονοστοιχεία που φορτώνονται από το GTM.