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

Προσοχή

Τα προσαρμοσμένα εικονοστοιχεία είναι μια προηγμένη λειτουργία που απαιτεί γνώση JavaScript. Η συμμόρφωση με την ισχύουσα νομοθεσία, οι συγκαταθέσεις, η ασφάλεια του κώδικα, η αντιμετώπιση προβλημάτων και οι ενημερώσεις είναι δική σας ευθύνη. Τα εικονοστοιχεία υπόκεινται στους Όρους Παροχής Υπηρεσιών του Shopify.

Η προσθήκη και η χρήση προσαρμοσμένων εικονοστοιχείων δεν υποστηρίζεται από το Shopify. Εάν χρειάζεστε βοήθεια για την προσθήκη ή τη χρήση ενός προσαρμοσμένου εικονοστοιχείου, μπορείτε να προσλάβετε έναν Συνεργάτη Shopify.

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

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

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

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

Όταν προσθέτετε ένα προσαρμοσμένο εικονοστοιχείο, καθορίζετε τις ακόλουθες πληροφορίες:

Το εικονοστοιχείο JavaScript τρίτου κατασκευαστή.
Τα συμβάντα συμπεριφοράς που θέλετε να παρακολουθήσετε.
Οι ρυθμίσεις συγκατάθεσης για το απόρρητο των πελατών.

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

Η δημιουργία του κώδικα για ένα προσαρμοσμένο εικονοστοιχείο περιλαμβάνει τα ακόλουθα βήματα:

Προετοιμασία του SDK Javascript τρίτου κατασκευαστή.
Διαμορφώστε το εικονοστοιχείο σας ώστε να παρακολουθεί συμβάντα πελατών.
Διαμορφώστε τις ρυθμίσεις συγκατάθεσης για το απόρρητο των πελατών για το εικονοστοιχείο σας.

Προετοιμασία του SDK Javascript τρίτου κατασκευαστή

Η υπηρεσία τρίτου κατασκευαστή με την οποία συνεργάζεστε σάς παρέχει τον κώδικα που είναι ενσωματωμένος στο εικονοστοιχείο. Ένα εικονοστοιχείο συνήθως έχει 2 στοιχεία: ένα SDK Javascript και τον κώδικα παρακολούθησης. Οποιοδήποτε HTML στον κώδικα της υπηρεσίας τρίτου κατασκευαστή πρέπει να αφαιρεθεί, καθώς το sandbox εικονοστοιχείων του Shopify υποστηρίζει μόνο JavaScript.

Ακολουθεί ένα παράδειγμα ενός μετα-εικονοστοιχείου. Τα εικονοστοιχεία διαφέρουν ελαφρώς από τον έναν τρίτο κατασκευαστή στον άλλο.

<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"/></noscript>
<!-- End Meta Pixel Code -->

Αφού αφαιρέσετε τον κώδικα HTML από τον κώδικα της Meta, απομένουν το SDK για το μετα-εικονοστοιχείο και ο κώδικας για την αρχικοποίησή του. Ο κώδικας παρακολούθησης του συμβάντος PageView έχει επίσης αφαιρεθεί, επειδή θα προστεθεί στο επόμενο βήμα.

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);

Το SDK του μετα-εικονοστοιχείου δεν μεταδίδει αυτόματα δεδομένα από ένα προσαρμοσμένο εικονοστοιχείο του Shopify. Για να μεταδώσετε δεδομένα, πρέπει να εγγραφείτε σε συμβάντα.

Ενδέχεται να συναντήσετε εικονοστοιχεία που φορτώνονται με χρήση του `script src=`. Η HTML δεν υποστηρίζεται στα εικονοστοιχεία του Shopify, επομένως θα χρειαστεί να αντικαταστήσετε το `script src=` με το αντίστοιχο σε JavaScript.

Ακολουθεί ένα δείγμα εικονοστοιχείου του Google Analytics που φορτώνεται με χρήση του `script src=`:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ''YOUR_PIXEL_ID'');
</script>

Το τμήμα `script src=` μπορεί να αντικατασταθεί από το αντίστοιχο σε JavaScript. Να βεβαιώνεστε πάντα ότι το χαρακτηριστικό src αντιστοιχεί στην έκδοση HTML:

const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_PIXEL_ID');

Το SDK εικονοστοιχείων της Google δεν μεταδίδει αυτόματα δεδομένα από ένα προσαρμοσμένο εικονοστοιχείο του Shopify. Για να μεταδώσετε δεδομένα, πρέπει να εγγραφείτε σε συμβάντα.

Παρακολούθηση συμβάντων πελατών

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

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

Μπορείτε να εγγραφείτε σε συμβάντα χρησιμοποιώντας το Shopify Pixels Extension API. Θα χρειαστεί να τοποθετήσετε τον κώδικα του εικονοστοιχείου τρίτου μέρους μαζί με το συμβάν στο οποίο εγγράφεστε.

Αυτό είναι ένα παράδειγμα του συμβάντος `PageView` για το μετα-εικονοστοιχείο της Meta. Σημειώστε ότι το `fbq("track")` είναι μέρος του κώδικα της Meta και κάθε εταιρεία θα έχει τη δική της έκδοση, για την οποία θα πρέπει να ανατρέξετε στην τεκμηρίωσή της.

analytics.subscribe("page_viewed", async (event) => {
  fbq('track', 'PageView');
});

Ορισμένα συμβάντα έχουν μετα-δεδομένα που μπορείτε να μεταβιβάσετε στο εικονοστοιχείο σας. Ακολουθεί ένα παράδειγμα μεταβίβασης ορισμένων λεπτομερειών προϊόντος στο συμβάν `ViewContent` της Meta:

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price?.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

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

Αυτό είναι ένα παράδειγμα του τρόπου με τον οποίο ενδέχεται να εμφανίζεται ένα δημοσιευμένο προσαρμοσμένο συμβάν στα αρχεία liquid του θέματός σας:

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

Αυτό είναι ένα παράδειγμα του τρόπου με τον οποίο μπορείτε να διαμορφώσετε το εικονοστοιχείο σας για να εγγραφείτε σε αυτό το προσαρμοσμένο συμβάν:

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

Για περισσότερες πληροφορίες σχετικά με τα προσαρμοσμένα συμβάντα, ανατρέξτε στην Τεκμηρίωση για προγραμματιστές του Shopify.

Σημείωση

Είστε υπεύθυνοι για τη δική σας συμμόρφωση με την προστασία προσωπικών δεδομένων και θα πρέπει να συμβουλευτείτε τον δικό σας νομικό σύμβουλο για να προσδιορίσετε πώς οι νόμοι στην περιοχή σας, και στην περιοχή στην οποία πουλάτε, ενδέχεται να επηρεάσουν την επιχείρησή σας. Για να πουλάτε προϊόντα χρησιμοποιώντας την πλατφόρμα του Shopify, πρέπει να συμμορφώνεστε με τους νόμους της δικαιοδοσίας της επιχείρησής σας και των πελατών σας, τους Όρους Χρήσης του Shopify, την Πολιτική Αποδεκτής Χρήσης του Shopify και οποιεσδήποτε άλλες ισχύουσες πολιτικές. Μάθετε περισσότερα για την προστασία προσωπικών δεδομένων πελατών.

Σε αγορές που έχουν διαμορφωθεί ώστε να απαιτούν συναίνεση, όπως ο Ευρωπαϊκός Οικονομικός Χώρος (ΕΟΧ) και το Ηνωμένο Βασίλειο, τα εικονοστοιχεία ιστού εκτελούνται μόνο όταν οι επισκέπτες του ιστοτόπου έχουν παράσχει τις απαιτούμενες άδειες στη διαμόρφωση του εικονοστοιχείου.

Από προεπιλογή, τα νέα προσαρμοσμένα εικονοστοιχεία απαιτούν άδειες Μάρκετινγκ και Στοιχείων ανάλυσης. Μπορείτε να προσαρμόσετε τις άδειες που απαιτούνται στην ενότητα Προστασία προσωπικών δεδομένων πελατών > Άδεια των λεπτομερειών του προσαρμοσμένου εικονοστοιχείου σας.

Ομοίως, τα εικονοστοιχεία που έχουν διαμορφωθεί ως πώληση δεδομένων δεν θα εκτελούνται για πελάτες που έχουν εξαιρεθεί από τις πωλήσεις ή την κοινοποίηση δεδομένων, εκτός εάν το εικονοστοιχείο υποστηρίζει περιορισμένη χρήση δεδομένων. Από προεπιλογή, τα νέα προσαρμοσμένα εικονοστοιχεία χαρακτηρίζονται ως πώληση δεδομένων. Μπορείτε να προσαρμόσετε αν τα δεδομένα που συλλέγονται χαρακτηρίζονται ως πώληση δεδομένων στην ενότητα Προστασία προσωπικών δεδομένων πελατών > Πώληση δεδομένων των λεπτομερειών του προσαρμοσμένου εικονοστοιχείου σας.

Οι προγραμματιστές προσαρμοσμένων εικονοστοιχείων μπορούν να μάθουν περισσότερα σχετικά με τη συλλογή και την καταχώριση συναίνεσης.

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

Για παράδειγμα, παρακάτω παρουσιάζεται ο τρόπος με τον οποίο οι σκοποί Μάρκετινγκ και Στοιχείων ανάλυσης αντιστοιχούν στη Λειτουργία συναίνεσης της Google:

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

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

Ακολουθεί ένα παράδειγμα του κώδικα για ένα μετα-εικονοστοιχείο. Ο κώδικας του εικονοστοιχείου ποικίλλει ανάλογα με τον πάροχο υπηρεσιών τρίτου μέρους και τα συμβάντα που θέλετε να παρακολουθείτε. Ανατρέξτε στην αναφορά συμβάντων πελατών για μια λίστα με τα διαθέσιμα συμβάντα.

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

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", (event) => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", (event) => {
  fbq('track', 'ViewContent', {
    content_ids:  [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

analytics.subscribe("search_submitted", (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data?.cartLine?.merchandise?.productVariant?.id],
    content_name: event.data?.cartLine?.merchandise?.productVariant?.title,
    currency: event.data?.cartLine?.merchandise?.productVariant?.price?.currencyCode,
    value: event.data?.cartLine?.merchandise?.productVariant?.price.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", (event) => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", (event) => {
  fbq('track', 'Purchase', {
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
  });
});