📘

For some guided help connecting Shopify, please contact [email protected] and we'll gladly hop a call to walk you through the process.

The Woopra + Shopify Integration enables you to import order data for use in your customer analytics.

Since this integration uses our Dataloader connection, you can import historical data from Shopify. We also have access to certain tables in Shopify, where you can customize what data you want to import to Woopra.

This integration makes it easy to do reporting on revenue and sales. With the right setup, it’s possible to see your customer’s complete journey from marketing campaigns all the way to checking out.

Installation

🚧

As of August 13, 2024, Shopify will be sunsetting 'checkout.liquid'

We have updated the following docs to use Shopify Pixels instead of 'checkout.liquid'.

This document may still need some updates but we have tested the following code and it's currently working as expected.

There are two parts to setting up Shopify tracking:

1. Connect Shopify through our Data Loader to import historical and real-time order data. This data is pulled directly from Shopify's API.
2. Add Woopra code to the Shopify Pixels to tie website browsing data with the imported order data. Since the order data is imported directly from Shopify's API, this creates a separate Woopra profile from a user's website tracked data profile(i.e a profile that includes events that include pageviews, button clicks, scroll depth, etc.) unless this "website profile" is identified. We can assure these two profiles will merge correctly by editing the code on your shop page to identify users when they check out. This way, you'll have a complete journey for your user, from site behavior to completed order.

1 - Data Loader Connection

Navigate to the integration section and search for Shopify. Click the Connect tab and create a new connection. You'll be prompted to enter your connection details.

2 - Editing the Shopify Code

Shopify Pixel Instructions

Navigate your Store's settings and click on Customer Events. Here, you can add custom pixels.

Next, you'll use the following code when creating a custom pixel:

📘

Make sure you add your Woopra project name (domain) to the woopra.config part of the code.

<!-- Start of Woopra Code -->
!function(){var t,o,c,e=window,n=document,r=arguments,a="script",i=["call","cancelAction","config","identify","push","track","trackClick","trackForm","update","visit"],s=function(){var t,o=this,c=function(t){o[t]=function(){return o._e.push([t].concat(Array.prototype.slice.call(arguments,0))),o}};for(o._e=[],t=0;t<i.length;t++)c(i[t])};for(e.__woo=e.__woo||{},t=0;t<r.length;t++)e.__woo[r[t]]=e[r[t]]=e[r[t]]||new s;(o=n.createElement(a)).async=1,o.src="https://static.woopra.com/js/w.js",(c=n.getElementsByTagName(a)[0]).parentNode.insertBefore(o,c)}("woopra");

woopra.config({
  domain: {Your Woopra Project Domain},
  outgoing_tracking: true,
  download_tracking: true,
  click_tracking: true
});

// Track Page views
analytics.subscribe('page_viewed', (event) => {
  woopra.track('pv', {
    title: event.context.document.title,
    url: event.context.document.location.pathname,
    uri: event.context.document.location.href,
    test: 123
  })
});

analytics.subscribe("product_viewed", event => { 
  woopra.track('product view', {
    title: event.data.productVariant.title,
    price: event.data.productVariant.price.amount,
    currency: event.data.productVariant.price.currencyCode,
    url: event.context.document.location.pathname,
    uri: event.context.document.location.href
  })
});

analytics.subscribe("clicked", event => { 
  woopra.track('button click',  {
    href: event.data.element.href,
    text: event.data.element.name
  })
});

analytics.subscribe('cart_viewed', (event) => {
  woopra.track('cart view', {
    cost: event.data.cart.cost,
    quantity: event.data.cart.totalQuantity,
    lines: JSON.stringify(event.data.cart.lines),
    title: event.context.document.title,
    url: event.context.document.location.pathname,
    uri: event.context.document.location.href
  });
});

analytics.subscribe('checkout_address_info_submitted', (event) => {
  woopra.identify({
    email: event.data.checkout.email,
    name: event.data.checkout.shippingAddress.firstName + ' ' + event.data.checkout.shippingAddress.lastName
  });
  woopra.track('checkout address info submitted', {
    address1: event.data.checkout.billingAddress.address1,
    address2: event.data.checkout.billingAddress.address2,
    city: event.data.checkout.billingAddress.city,
    country: event.data.checkout.billingAddress.countryCode,
    state: event.data.checkout.billingAddress.provinceCode,
    zip: event.data.checkout.billingAddress.zip,
    total_tax: event.data.checkout.totalTax,
    total_price: event.data.checkout.totalPrice,
    title: event.context.document.title,
    url: event.context.document.location.pathname,
    uri: event.context.document.location.href
  });
});

analytics.subscribe('checkout_completed', event => { 
  woopra.identify({
    email: event.data.checkout.email
  });

  woopra.track("checkout completed")
});
<!-- End of Woopra Code -->

Setting up the Task

The Task is used to pull in selected data from Shopify. You can create a new Task if one wasn't added by navigating to the Task section under Data Loader.

1. From there configure the Task by selecting the Order table. You will also select the data type as 'Track'.

2. Map User Event. First Map the order.email to "email" in Woopra.

3. Name your event and add Event Properties. Important fields would be total_price, order_id, checkout_id. Also, add any additional fields that are important to you.

4. Tag Visitor Properties. This is data about the user that you want to import. You can select any Visitor properties you'd like but be sure to add email.

5. Select the Timestamp as created_at.

6. Save, Preview, and Activate. The import will start to bring in records. This may take some time to complete depending on the amount of data.