Shopify Tracking
Inhaltsverzeichnis
Kurz & Knapp
Verbinde Shopify direkt mit Varify und analysiere deine Experimente direkt mit den Conversion und Revenue Daten aus Shopify. Die Integration funktioniert nur gemeinsam mit dem Einsatz von GA4, da die Anzahl der Visitor aus GA4 importiert werden.
So nutzt du Shopify Tracking Daten
Schritt 1: Aktiviere den Shopify Datenimport
Gehe zum “Tracking Setup” und klicke auf den Tab “Advanced Setup”. Aktiviere hier die Einstellung “Use Shopify Data”.
Schritt 2: Erstelle ein Custom Pixel mit Varify Tracking Code
Klicke auf “Settings” in deinem Shopify Store und öffne “Customer events”. Klicke danach auf “Add custom pixel” und nenne das Pixel: “varify-checkout”. Im Anschluss daran fügst du den nachfolgenden Code ein:
let storage;
async function getVarifyData() {
if (storage) {
return storage;
}
storage = new Promise(async (resolve, reject) => {
try {
const raw = await browser.localStorage.getItem('varify-data');
resolve(raw ? JSON.parse(raw) : {});
} catch (error) {
console.error('Error retrieving Varify data from local storage', error);
reject(error);
}
});
return storage;
}
analytics.subscribe('varify', async (event) => {
const {
varify_experimentId,
varify_variationId,
teamId,
storageType = 'localStorage',
} = event.customData || {};
if (!varify_experimentId || !teamId) {
console.warn(
'Varify event missing required custom data: experimentId or teamId.'
);
return;
}
const validVariationId =
varify_variationId !== undefined ? varify_variationId : null;
const existingData = await getVarifyData();
if (!existingData.data) {
existingData.data = [];
}
const experimentEntry = {
experimentId: varify_experimentId,
variationId: validVariationId,
timestamp: Date.now(),
};
existingData.data = existingData.data.filter(
(entry) => entry.experimentId !== varify_experimentId
);
existingData.data.push(experimentEntry);
existingData.teamId = teamId;
existingData.storageType = storageType;
await browser.localStorage.setItem(
'varify-data',
JSON.stringify(existingData)
);
});
analytics.subscribe('checkout_started', async (event) => {
const existingData = await getVarifyData();
if (!existingData.data || existingData.data.length === 0) {
return;
}
const thresholdDate = new Date();
thresholdDate.setDate(thresholdDate.getDate() - 28);
existingData.data = existingData.data.filter((entry) => {
if (!entry.timestamp || !entry.experimentId) {
return false;
}
const entryDate = new Date(entry.timestamp);
return entryDate >= thresholdDate;
});
await browser.localStorage.setItem(
'varify-data',
JSON.stringify(existingData)
);
});
analytics.subscribe('checkout_completed', async (event) => {
const orderId = event.data?.checkout?.order?.id;
const orderRevenue = event.data?.checkout?.subtotalPrice?.amount;
if (!orderId || !orderRevenue) {
console.warn(
'Checkout completed event missing required data: orderId or orderRevenue.'
);
return;
}
const parsedData = await getVarifyData();
if (!parsedData.data || parsedData.data.length === 0 || !parsedData.teamId) {
console.warn('No valid Varify data found in local storage.');
return;
}
parsedData.data = parsedData.data.filter((entry) => {
if (!entry.timestamp || !entry.experimentId) {
return false;
}
return true;
});
const storedAccountId = parsedData.teamId;
const experiments = parsedData.data.map((entry) => {
return [entry.experimentId, entry.variationId];
});
const storageType = parsedData.storageType;
const storeHandle = init.data?.shop?.myshopifyDomain?.replace('.myshopify.com', '');
const lineItems = event.data?.checkout?.lineItems;
let cartProducts = [];
if (lineItems && Array.isArray(lineItems)) {
cartProducts = lineItems
.map((item) => {
const productId = item.variant?.product?.id?.split("/").pop();
const variantId = item.variant?.id?.split("/").pop();
if (productId && variantId) {
return {
productId,
variantId,
};
}
return null;
})
.filter((p) => p !== null);
}
try {
await fetch('https://ecommerce.varify.io/store_data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
experiments,
orderId,
orderRevenue,
accountId: storedAccountId,
storageType: storageType,
storeHandle,
cartProducts,
}),
});
} catch (error) {
console.error('Error sending data', error);
}
});
Nachdem du den Code hinzugefügt hast, klicke auf speichern. Prüfe zusätzlich, dass deine Permissions korrekt gesetzt sind, ansonsten wird das Script nicht ausgeführt, falls eine User Permission fehlen sollte. Klicke im Anschluss auf “Connect”. Jetzt ist die Integration erfolgreich installiert.
Schritt 3: Füge deinem Experiment Shopify Goals hinzu
Stelle sicher, dass dein Tracking Setup eingerichtet ist und dass du GA4 als Tracking Provider ausgewählt hast und dass der Punkt “Test Evaluation” auf “In Varify and GA4” steht. Wenn dass der Fall ist, dann erscheinen ab jetzt für “neu angelegte” Experimente ein “Results Link” oben rechts am gestarteten Experiment.
Beim Klick auf den “Results Link” öffnet sich der entsprechende Ergebnisreport des Experiments. Nun kannst du per Klick auf “Add Shopify Goal” entweder “Conversions” oder “Revenue” als Goal hinzufügen. Die Visitors des Goals, werden aus GA4 übernommen. Der Conversion Wert und der Revenue Wert kommen direkt aus Shopify.
Wichtig: GA4 Daten werden erst nach ca. 24 Stunden upgedated. Die Daten aus Shopify werden in Echtzeit upgedated.
Produktfilter im Ergebnisreport
Analysiere die Performance bestimmter Produkte in deinem A/B‑Test. Du kannst entweder einzelne Produkte oder Produktvarianten betrachten. Gib dafür im Feld eine Produkt‑ID ein oder mehrere IDs, durch Kommata getrennt ein.
