> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify-Web-Pixel konfigurieren

> Conversion-Tracking mit Web-Pixeln für Post-Purchase-Upsells einrichten

[Shopify Web-Pixel](https://help.shopify.com/en/manual/promoting-marketing/pixels) sind Shopifys Lösung, um Daten zu Käufen wie Conversion-Rates zu tracken. Es gibt zwei primäre Arten, wie du mit ihnen interagierst:

* App-Web-Pixel
* Custom-Web-Pixel

<div id="app-web-pixels">
  # App-Web-Pixel
</div>

Einige App-Pixel (z. B. Omega Facebook Pixel) integrieren sich direkt in Shopify Web-Pixel. Diese Apps benötigen keine weitere Einrichtung, um mit Aftersell zu funktionieren.

<div id="custom-web-pixels">
  # Custom-Web-Pixel
</div>

Custom-Pixel ermöglichen maßgeschneiderte Lösungen, wenn im Shopify-Marketplace kein App-Pixel zu finden ist, das deine Anforderungen erfüllt. Im Folgenden wird beschrieben, wie du bestehende Tracking-Scripts der Bestellstatus-Seite auf Custom-Pixel umstellst. Bitte beachte vorher die [potenziellen Risiken von Custom-Pixeln](https://help.shopify.com/en/manual/promoting-marketing/pixels/overview#potential-risks).

Wenn du speziell Google Tag Manager nutzt, stellt Shopify [hilfreiche Dokumentation für diese Migration](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial) bereit.

Es gibt 3 Kernschritte, um ein Custom-Pixel für Conversion-Tracking zu erstellen.

1. Das JavaScript-SDK des Drittanbieters vorbereiten
2. Conversion-Tracking mit Web-Pixeln einrichten
3. Dein Custom-Pixel verbinden

<div id="1-preparing-the-3rd-party-javascript-sdk">
  ## 1. Das JavaScript-SDK des Drittanbieters vorbereiten
</div>

Entferne jegliches HTML aus dem bereitgestellten Pixel-Code. Jedes JavaScript, das über ein HTML-`<script>`-Tag geladen wird, sollte stattdessen über einen reinen JavaScript-Ansatz geladen werden.

Dieser Prozess wird [hier](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code#third-party-sdk) ausführlicher behandelt.

Ein Beispiel mit Google Tag Manager

*Ursprünglicher Pixel-Code:*

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

*Nach dem Entfernen des HTML und Umarbeiten der `<script>`-Tags:*

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

Beachte, dass Googles Pixel-SDK Daten aus einem Shopify-Custom-Pixel nicht automatisch überträgt. Um Daten zu übertragen, musst du Events abonnieren.

<div id="2-setting-up-conversion-tracking-using-web-pixels">
  ## 2. Conversion-Tracking mit Web-Pixeln einrichten
</div>

Um Conversions mit Custom-Pixeln zu tracken, abonniere das von Shopify bereitgestellte `checkout_completed`-Event. Dieses Event wird entweder auf der Post-Purchase-Seite ausgelöst, wenn deinem Kunden eine angezeigt wird, oder andernfalls auf der Danke-Seite. Das Event feuert in beiden Fällen nur einmal, es ist also keine zusätzliche Logik nötig, um Doppelzählungen eines Kaufs zu vermeiden.

```
analytics.subscribe("checkout_completed", (event) => {  
  // process event using 3rd party pixel tracking code  
});
```

Nutze diese Referenz, um zu sehen, welche Datenpunkte du aus dem `event` abrufen kannst.

[Shopify checkout\_completed-Event](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed)

Ein Beispiel für ein Custom-Meta-Pixel

*Tracking-Code, der beim Abschluss eines Checkouts auslöst:*

```
!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);  
  
analytics.subscribe("checkout_completed", (event) => {  
  fbq('track', 'Purchase', {  
    currency: event.data?.checkout?.currencyCode,  
    value: event.data?.checkout?.totalPrice?.amount,  
  });  
});
```

<div id="3-connecting-your-custom-pixel">
  ## 3. Dein Custom-Pixel verbinden
</div>

Bevor du ein Custom-Pixel hinzufügst, entferne oder ändere alle bestehenden Pixel, um sicherzustellen, dass Customer Events nicht doppelt gezählt werden. Bestehender Pixel-Code sollte überall manuell entfernt werden, wo er vorhanden ist, etwa in `theme.liquid`, `checkout.liquid` (nur Plus-Händler) und in den Additional scripts deiner Checkout-Einstellungen.

Sobald das erledigt ist, folge diesen Schritten, um ein Custom-Pixel mit deinem Store zu verbinden.

1. Navigiere zu Settings > Customer Events > Custom Pixels > Add Custom Pixel

   1. Gib einen Namen für dein Custom-Pixel ein.
2. Füge deinen Custom-Pixel-Code im Abschnitt „Code“ ein.
3. Stelle sicher, dass die Datenschutzeinstellungen für Kunden korrekt konfiguriert sind.
4. Klicke bei deinem Custom-Pixel auf „Save“.
5. Klicke auf „Connect“, um dein Custom-Pixel live zu schalten!