Shopify Tracking
Table of contents
In short
Connect Shopify directly with Varify and analyze your experiments directly with the conversion and revenue data from Shopify. The integration only works together with the use of GA4, as the number of visitors is imported from GA4.
How to use Shopify tracking data
Step 1: Activate the Shopify data import
Go to "Tracking Setup" and click on the "Advanced Setup" tab. Activate the "Use Shopify Data" setting here.
Step 2: Create a custom pixel with Varify tracking code
Click on "Settings" in your Shopify store and open "Customer events". Then click on "Add custom pixel" and insert the following code:
analytics.subscribe('varify', async (event) => {
const {varify_experimentId, varify_variationId, teamId, storageType, timestamp} = event.customData;
const validVariationId = varify_variationId !== undefined ? varify_variationId : null;
const existingDataRaw = await browser.localStorage.getItem('varify-data');
const existingData = existingDataRaw ? JSON.parse(existingDataRaw) : {};
if (!existingData.data) {
existingData.data = [];
}
const experimentEntry = {
[varify_experimentId]: validVariationId,
timestamp: timestamp || new Date().toISOString()
};
existingData.data = existingData.data.filter(
entry => !entry.hasOwnProperty(varify_experimentId)
);
existingData.data.push(experimentEntry);
existingData.teamId = teamId;
existingData.storageType = storageType;
existingData.data = existingData.data.filter(
entry => Object.keys(entry).length > 0
);
await browser.localStorage.setItem('varify-data', JSON.stringify(existingData));
});
analytics.subscribe('checkout_started', async (event) => {
const existingDataRaw = await browser.localStorage.getItem('varify-data');
const existingData = existingDataRaw ? JSON.parse(existingDataRaw) : {};
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) {
return true;
}
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 {data: {checkout: {order: {id: orderId} = {}, subtotalPrice: {amount: orderRevenue} = {}} = {}}} = event;
const localVariationData = await browser.localStorage.getItem('varify-data');
const parsedData = JSON.parse(localVariationData);
const storedAccountId = parsedData.teamId;
const storageType = parsedData.storageType;
const experiments = parsedData.data.map(entry => {
return Object.entries(entry)[0]
});
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,
}),
});
} catch (error) {
console.error('Error sending data', error);
}
});
After you have added the code, click on save. Also check that your permissions are set correctly, otherwise the script will not be executed if a user permission is missing. Then click on "Connect". The integration is now successfully installed.
Step 3: Add Shopify Goals to your experiment
Make sure that your tracking setup is set up and that you have selected GA4 as the tracking provider and that the "Test Evaluation" item is set to "In Varify and GA4". If this is the case, a "Results Link" will now appear for "newly created" experiments at the top right of the started experiment.
Clicking on the "Results Link" opens the corresponding results report of the experiment. Now you can add either "Conversions" or "Revenue" as a goal by clicking on "Add Shopify Goal". The visitors of the goal are taken from GA4. The conversion value and the revenue value come directly from Shopify.
Important: GA4 data is only updated after approx. 24 hours. The data from Shopify is updated in real time.