Add Revenue Tracking to Shopify via Webhook

THIS ARTICLE WILL HELP YOU:

• Shopify Webhooks
• Create a Revenue Goal in your Convert account
• Add code to your Global Project Javascript
• Configure a webhook using the Shopify admin
• Access your Convert Report
• Compatibility with other Upsell and Subscription Shopify Plugins
• Changing the revenue goal depending on external factors

Shopify Webhooks

Instead of using the Google Analytics Ecommerce code or the Manual Revenue Tracking code to capture revenue on your store, you can use the Shopify Webhook method we provide below.

Shopify webhook is a feature that allows a website to notify other systems when events arise. For example, when you create a new order, it will help other systems can actively take information from CRM when data arises. In particular, webhooks can also store those data.

With webhooks, you will receive push notifications when an event occurs. You will not need to probe the API to determine whether these events have occurred or not. Webhooks allows you to provide a URL for the webhook provider to send requests to. 

This method of tracking revenue conversions is more robust than the manual revenue tracking method of creating a Revenue Goal that tracks the "Thank you" page. The reason is that is actually triggered when an order is created, rather than when a visitor visits the thank you page. 

Create a Revenue Goal in your Convert account

Go to goals and select the template Revenue Goal:

Add your Goal name and select either Manual Revenue Tracking or GA since it does not matter. Write down the Goal ID since you will use it in the next step:

Add code to your Global Project Javascript

Add this JS code to the "Global Project Javascript". Be sure to update the revenue_goal_id in the code below with your own which you created in the previous step:

document.addEventListener('DOMContentLoaded', function (event) {
  var session_cookie = convert.getCookie('_conv_s');
if (
    (JSON.stringify(convert.currentData.experiments) != '{}' || 
    JSON.stringify(convert.historicalData.experiments) != '{}') &&
    session_cookie
  ) {
    // Create a goal and change the id below
    var revenue_goal_id = '100000001';

    var session_id = session_cookie.substring(
      session_cookie.lastIndexOf('sh:') + 3,
      session_cookie.lastIndexOf('*')
    )
    var type_of_visitor
    if (convert.getUserData().browsing.returning == false) {
      type_of_visitor = '0'
    } else {
      type_of_visitor = '1'
    }
    var exp_list = []
    var variation_list = []
   
    var varID
    if (convert.currentData) {
      var new_exp = convert.currentData.experiments
      for (var expID in new_exp) {
        varID = new_exp[expID].variationId
        if (!exp_list.includes(convert.data.experiments[expID].id)) {
          exp_list.push(convert.data.experiments[expID].id)
          variation_list.push(varID)
          console.log(
            'Adding experiment: ' +
              convert.data.experiments[expID].id +
              ':' +
              varID
          )
        }
      }
    }
        if (convert.historicalData) {
      var old_exp = convert.historicalData.experiments
      for (var expID in old_exp) {
        varID = old_exp[expID].variationId
        if (!exp_list.includes(convert.data.experiments[expID].id)) {
          exp_list.push(convert.data.experiments[expID].id)
          variation_list.push(varID)
          console.log(
            'Adding experiment: ' +
              convert.data.experiments[expID].id +
              ':' +
              varID
          )
        }
      }
    }
    var convert_country = convertData.geo.country;
    // here we just pass the convert data, and prepend __ to make the attributes private.
    convert.$.post('/cart/update.js', {
      attributes: {
        'cid': convert.data.u_id,
        'pid': convert.data.prj.id,
        'vid': session_id,
        'new': type_of_visitor,
        'ctry': convert_country,
        'goals': revenue_goal_id,
        'vars': variation_list,
        'exps': exp_list,
        'visitorSegments': JSON.stringify(convert.getVisitorSegments())
      }
    })
  }
})

Configure a webhook using the Shopify admin

You can configure your webhook using the Shopify admin. From your Shopify admin, go to Settings > Notifications.

After you've created the webhook, you are presented with a secret to validate its integrity. You can also test it.
Also, be aware that it has been reported that Shopify removes webhook configurations that have not been used within a certain time period. Check that the webhook already exists before requesting the Convert support team to debug your conversions. 

Access your Convert Report

You will start receiving revenue data in your report:

Compatibility with other Upsell and Subscription Shopify Plugins

This integration should be compatible with other upsell and subscription plugins that use the Shopify API to create orders within Shopify. 

It has been verified by the Convert team that this integration can track Recharge Shopify plugin orders. 

The only thing that the webhook does not track is dynamic checkout buttons, like "Buy Now".

Changing the revenue goal depending on external factors

It is possible to change the triggered revenue goal, depending on other factors. A real example is differentiating normal orders from subscription orders. 

For this, you would need to create the different revenue goals as instructed above. Let's say, one called Normal Orders and another one called Subscription Orders. Then you need to gather the corresponding id for each of the orders.

Then you need to create an if the condition that replaces the goal based on the different order types. 

Somehow, you will need to determine with code what type of order is being created. This is very particular to each site. 

In the following example, a jquery instruction determines if a checkbox is checked which signals subscription orders, and then the goal is set to be a subscription goal.

 // Create a goal and change the id below
if (convert.$('.cart-sub-div--checked').length > 0) {
// Set goal id for Subscription Goal id.
var revenue_goal_id = '100000002';
}
else {
// Set goal id for Normal Order Goal id.
var revenue_goal_id = '100000001';
}