Integrate Shopify with Wingify

This article covers the following:

• Overview
• Use Cases
• Before You Begin
• Create a Shopify Connection in Wingify
• Configure Shopify Pixel
• Event Format
• Access Wingify Campaign Data in Shopify Custom Pixels
• Verify the Integration
• Best Practices
• Troubleshooting
• FAQs

Overview

This article explains how to integrate Wingify with Shopify to automatically send campaign and variation data into Shopify's Web Pixel event stream. With this setup, you can use the campaign data in your Shopify Custom Pixels and pass it on to third-party analytics and marketing tools. 

Key Benefits

• Centralized Data Flow: Leverage Shopify's native Web Pixel infrastructure to handle Wingify campaign data alongside other standard e-commerce events.
• Extended Analytics: Using a Shopify Custom Pixel as a channel, you can send Wingify experiment data to platforms indirectly integrated with Wingify (like Heap, GTM, etc.).
• Simplified Data Forwarding: Using the Shopify event subscription model, you can avoid complex manual tagging or direct API integrations for sending Wingify data to specific tools.
• Unified Reporting: Correlate Wingify campaign exposure with downstream actions tracked in analytics tools connected through Shopify Custom Pixels.

Use Cases

• Analyze Wingify Impact in Heap: Send Wingify campaign/variation data to Heap via a custom pixel to segment Heap reports based on experiment exposure.
• Track Wingify Experiments in GA4 via GTM: Push Wingify data to the dataLayer using a GTM custom pixel for detailed analysis in Google Analytics 4.
• Correlate Wingify Exposure with Other Pixel Data: Combine Wingify campaign data with conversion events from other marketing pixels (e.g., Facebook, TikTok) within Shopify's event context or by forwarding both to a unified analytics platform via custom pixels.
• Build Custom Audiences: Use the Wingify data pushed via custom pixels to build audiences in advertising platforms based on experiment participation.

Before You Begin

• You have an active Wingify account.
• You have an active Shopify store.
• The Wingify SmartCode is installed on your Shopify store (for example, through theme modification or the Wingify Shopify App).
• Familiarity with Shopify Custom Pixels and the Shopify analytics.subscribe API.

Create a Shopify Connection in Wingify

Wingify supports the following Shopify connection type:

Send campaign data to Shopify (Push based): Allows you to make Wingify campaign and variation data available within Shopify Web Pixels.

To create a Shopify connection in your Wingify account:

1. Log in to your Wingify account.
2. From the left panel, navigate to Configurations > Integrations.
3. Click the Shopify integration tile and click Create Connection.
4. Select Send campaign data to Shopify.
5. Enter a name in the Connection Name field.
6. Click Create Connection.

All configured connections appear under the Config > Active Connections section on the Shopify integration page.

Configure Shopify Pixel

When a visitor becomes part of a Wingify campaign for which this integration is active, Wingify's client-side code triggers an event push to Shopify's Web Pixel API.

Event Format

• Event Name: wingify
• Event Properties (within event.customData in the subscriber callback):
• campaign_id: (number) The unique ID of the Wingify campaign.
• variation_id: (number) The unique ID of the variation assigned to the visitor.
• campaign_name: (string) The name of the Wingify campaign.
• variation_name: (string) The name of the variation assigned to the visitor.
• user_id: (string) The unique identifier of the visitor.
• target_id: (number) The ID of the associated trigger.
• target_name: (string) The name of the associated trigger.

//Structure of event.customData received by analytics.subscribe

{
"campaign_id": 123,
"variation_id": 2,
"campaign_name": "Shopify A/B",
"variation_name": "Variation-1",
"user_id": "123456789",
"target_id": 10,
"target_name": "Homepage Banner"
}

Access Wingify Campaign Data in Shopify Custom Pixels

The primary logic of this implementation is to add code to your Shopify Custom Pixels that listens for the Wingify event and then handles or sends the data it receives.

Subscribe to Wingify Event

Use the standard Shopify analytics.subscribe method in your Custom Pixel code to listen for the event:

analytics.subscribe("wingify", event => {
//event.customData contains the Wingify campaign details
console.log("Wingify Data Received:", event.customData);
// Add your custom logic here to process or forward the data
// e.g., send to Heap, push to dataLayer for GTM, etc.
});

Example: Send Wingify Data to GTM/GA4 via Custom Pixel

This example snippet shows how to push Wingify data into the dataLayer for use by Google Tag Manager, often configured to send data to GA4.

// 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);
analytics.subscribe("wingify", event => {
var expId = event.customData.campaign_id;
var variationId = event.customData.variation_id;
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'vwo-data-push-ga4',
'vwo_exp_variant_string': "VWO-" + expId + "-" + variationId
});
});

Verify the Integration

Once you complete the above steps, you can navigate to any running campaign where the integration is set up. After joining the campaign, you can check the network calls mentioned below.

Once the produce_batch call is available, you can check the integration data in the respective integration's network call (e.g., GA4).

Best Practices

• Wingify SmartCode Placement: Ensure the Wingify SmartCode is correctly installed and loads early on your Shopify pages.
• Custom Pixel Placement: Follow Shopify's guidelines for adding Custom Pixels. Place the analytics.subscribe code within the appropriate pixel context.
• Error Handling: Consider adding basic error handling (e.g., try...catch blocks) within your custom pixel code, especially if integrating with multiple tools.
• Consistent Naming: Use clear and consistent names for Wingify campaigns and variations, as these names will be passed in the data.
• Test Thoroughly: Test the end-to-end flow: Wingify campaign bucketing -> Shopify analytics.subscribe trigger -> Data appearing correctly in the target third-party tool (GA4, Heap, etc.).

Troubleshooting

FAQs

Q: Do I need to install a separate Wingify app from the Shopify App Store for this integration? A: No. This feature works by enabling the integration directly in the Wingify platform (under Configurations > Integrations). While Wingify may offer a Shopify app for easier SmartCode setup, sending data to Shopify Web Pixels is handled within Wingify itself, assuming the SmartCode is already installed on your store.

Q: What data exactly gets sent from Wingify to the Shopify Web Pixel?

A: Wingify sends the following event properties to Shopify Web Pixels:

• campaign_id
• campaign_name
• variation_id
• variation_name
• user_id
• target_id (optional)

• target_name (optional)

  Note: target_id and target_name are available only when using the Personalize Holdback feature.

Q: Is this integration sending data in real-time? A: Yes. When a visitor lands on your site and qualifies for a Wingify campaign variation, Wingify SmartCode triggers the push to the Shopify Web Pixel event stream in real-time (client-side).

Q: Can I use this integration to send Wingify goal conversion data to Shopify? A: No, this setup only sends information about which campaign and variation a user sees. You would need a different configuration to track goal conversions, possibly involving custom code or additional Wingify integrations.

Q: Will this integration slow down my site? A: The Wingify integration adds minimal overhead (a client-side event push). The performance impact mainly depends on the complexity and efficiency of the code you add within your Shopify Custom Pixels to process and forward this data. Keep your custom pixel code lean and efficient.

Need more help?

For more information or further assistance, contact Wingify Support.