📘
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, this means you can import historical data from Shopify. This also means that we 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

There are two parts to setting up Shopify tracking:

Connect Shopify through our Data Loader to import historical and real-time order data. This data is pulled directly from Shopify's API.
Edit the Shopify code 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 Versions

Shopify and Shopify Plus will have different methods of editing the code to successfully identify users on the client-side.

Shopify Plus Instructions

There will be two places to update the code--the main website tracking and the tracking checkout pages.

To do this, you'll need to edit the Shopify 'header.liquid' and 'checkout.liquid' files. This will allow the orders to be tracked correctly in Woopra

From your Shopify admin page, first find the 'header.liquid' file. Typically this should be under Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
Add the following code inside of the <head>.

🚧
Make sure you replace "domain.com" with your project name.

<!-- Start of Woopra Code -->
<script>
  !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: "domain.com",
    outgoing_tracking: true,
    download_tracking: true,
    click_tracking: true
  });

  {%- if customer -%}
  woopra.identify({
    id: {{ customer.id | json }},
    name: {{ customer.name | json }},
    email: {{ customer.email | json }},              
    order_count: {{ customer.orders_count | json }},
    total_spent: {{ customer.total_spent | json }}
  });
  {%- endif -%}

  woopra.track();
</script>
<!-- End of Woopra Code -->

Track the checkout pages. Insert the tracking snippet below to your 'checkout.liquid' file. This tracking code will identify logged in customers and customers who are checking out as guests.

<!-- Start of Woopra Code -->
<script>
  !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: "domain.com",
    outgoing_tracking: true,
    download_tracking: true,
    click_tracking: true
  });

  {%- if checkout.email -%}
    woopra.identify({
      email: {{ checkout.email | json }}
    });
  {%- endif -%}

  {%- if customer -%}
  woopra.identify({
    id: {{ customer.id | json }},
    name: {{ customer.name | json }},
    email: {{ customer.email | json }},              
    order_count: {{ customer.orders_count | json }},
    total_spent: {{ customer.total_spent | json }}
  });
  {%- endif -%}

  woopra.track();
</script>
<!-- End of Woopra Code -->

Shopify (standard) instructions

Since the checkout.liquid is only available in Shopify Plus accounts, the following instructions will need to be used for non-Shopify Plus accounts.

🚧
Note that this method has an issue where it won't tie the anonymous user's profile with the order profile. We're exploring some ways to address this, so this section is a work in progress.

To add code, you can add additional scripts to the order status page.

From your Shopify admin, go to Settings > Checkout.
Under Order status page, go to the Additional scripts text box.

Add the Woopra pixel tracking code. For example:

<img src="https://www.woopra.com/track/ce/?response=pixel&host=your-project.com&event=shopify_order&amount={{ total_price | money_without_currency }}&amp;order-id={{ order_number }}&amp;currency={{ currency }}" height="1" width="1" />

📘
Customers might return to the order status page multiple times. This can skew your conversion analytics. You might want to run scripts on the first visit only.

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.

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

1998 — Add any additional conditions if you want to limit the orders to a specific timeframe. Use the created_at timestamp to filter the data.

Map User Action. First Map the order.email to "email" in Woopra.

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

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.

Select the Timestamp as created_at.

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.