🚀 THIS ARTICLE WILL HELP YOU:
- Shopify combined with our new Tracking Method
- Add the Convert Script to your Shopify Theme
- Create a Revenue Goal in your Convert account
- Add code to your Global Project Javascript
- Add code on the checkout Shopify section
🏪 Shopify combined with our new Tracking Method
Instead of using the Google Analytics Ecommerce code or the Manual Revenue Tracking code or the webhook solution to capture revenue on your store, you can use our new tracking method and combine it with your Shopify store.
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.
It also solves the current problem we have with the webhook solution that does not track conversions that happen through the dynamic checkouts button like the Buy Now button, Amazon Pay, Paypal... etc.
📝 Add the Convert Script to your Shopify Theme
To integrate the two platforms, please go to Sales Channels > Online Store > Themes > More Actions > Edit Code
Select the theme.liquid file and paste the Convert tracking script just before the first "{% if %}" section, as shown in the screenshot below:
Don't forget to save your changes in Shopify.
🎯 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) {
let 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
let revenue_goal_id = '100232282'
let session_id = session_cookie.substring(
session_cookie.lastIndexOf('sh:') + 3,
session_cookie.lastIndexOf('*')
)
let exp_list = []
let variation_list = []
let varID
if (convert.currentData) {
let new_exp = convert.currentData.experiments
for (let 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) {
let old_exp = convert.historicalData.experiments
for (let 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
)
}
}
}
let convert_attributes = {
cid: convert.data.u_id,
pid: convert.data.prj.id,
vid: session_id,
goals: revenue_goal_id,
vars: variation_list,
exps: exp_list,
defaultSegments: convert.getDefaultSegments()
}
localStorage.setItem('convert_attributes', JSON.stringify(convert_attributes))
}
})
💳 Add code on the checkout Shopify section
Then you need to add this code on the checkout section (/admin/settings/checkout) of your Shopify:
<script type="text/javascript">
// adding the convert script to head
if (typeof _conv_host == 'undefined') {
window['_conv_prevent_bodyhide'] = true
let _conv_track = document.createElement('script')
_conv_track.src = '//cdn-3.convertexperiments.com/js/10021617-1002839.js'
document.getElementsByTagName('head')[0].appendChild(_conv_track)
}
// doing logic to submit track conversions
{% if first_time_accessed %}
console.debug('Convert: We are on the thank you page')
var convert_attributes = JSON.parse(
localStorage.getItem('convert_attributes')
)
if (convert_attributes) {
console.debug('Convert: We have attributes')
console.debug(convert_attributes)
//build POST data to be sent
const post = {
cid: convert_attributes.cid,
pid: convert_attributes.pid,
seg: convert_attributes.defaultSegments,
s: 'shopify',
vid: convert_attributes.vid,
ev: [
{
evt: 'tr',
goals: [convert_attributes.goals],
exps: convert_attributes.exps,
vars: convert_attributes.vars,
r: parseFloat(Shopify?.checkout?.total_price),
prc: Shopify?.checkout?.line_items.length
},
{
evt: 'hitGoal',
goals: [convert_attributes.goals],
exps: convert_attributes.exps,
vars: convert_attributes.vars
}
]
}
const data = JSON.stringify(post)
console.debug(post)
fetch(
`https://${convert_attributes.pid}.metrics.convertexperiments.com/track`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Content-Length': data.length
},
body: data
}
)
.then((response) => response.json())
.then((data) => {
console.debug('Convert: Conversion registered')
})
.catch(function (error) {
console.error(error)
})
}
{% else %}
console.debug('Convert: We are not on the thank you page')
{% endif %}
</script>💱 For Multi-Currency Sites
Add the following code instead to Shopify Admin > Settings > Additional Scripts > Order Status section. Make sure you change the details to your own tracking code and the currency code to what you want to convert your revenue amounts to.
<script type="text/javascript">
// adding the convert script to head
if (typeof _conv_host == 'undefined') {
window['_conv_prevent_bodyhide'] = true;
let _conv_track = document.createElement('script');
//Change the following line to match your project tracking code
_conv_track.src = '//cdn-3.convertexperiments.com/js/10012345-1001234.js';
document.getElementsByTagName('head')[0].appendChild(_conv_track);
}
// Change the following line to match the currency code to which
// you want to convert to.
const currency_to_report = 'USD';
{% if first_time_accessed %}
console.debug('Convert: We are on the thank you page');
let convert_attributes = JSON.parse(localStorage.getItem('convert_attributes'));
// Fetch the currencies.js script and ensure it is loaded
fetch('https://cdn.shopify.com/s/javascripts/currencies.js')
.then(response => response.text())
.then(scriptText => {
// This will evaluate the script content and should define the Currency object
eval(scriptText);
// Now we can check if Currency is defined
if (typeof Currency !== 'undefined') {
console.debug('Currency library loaded');
// Rest of your code that depends on Currency goes here...
if (convert_attributes && Shopify && Shopify.checkout) {
const revenue = parseFloat(Currency.convert(Shopify.checkout.subtotal_price, Shopify.checkout.currency, currency_to_report));
console.log('Revenue: ' + revenue);
//build POST data to be sent
const post = {
cid: convert_attributes.cid,
pid: convert_attributes.pid,
seg: convert_attributes.defaultSegments,
s: 'shopify',
vid: convert_attributes.vid,
ev: [
{
evt: 'tr',
goals: [convert_attributes.goals],
exps: convert_attributes.exps,
vars: convert_attributes.vars,
tid: Shopify.checkout.order_id,
r: revenue,
prc: Shopify.checkout.line_items.reduce((acc, item) => {
return acc + item.quantity;
}, 0)
},
{
evt: 'hitGoal',
goals: [convert_attributes.goals],
exps: convert_attributes.exps,
vars: convert_attributes.vars
}
]
};
const data = JSON.stringify(post);
console.debug(post);
fetch(
`https://${convert_attributes.pid}.metrics.convertexperiments.com/track`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Content-Length': data.length
},
body: data
}
)
.then((response) => response.json())
.then((_) => {
console.debug('Convert: Conversion registered');
})
.catch(function (error) {
console.error('Error sending tracking data:', error);
});
}
} else {
console.error('Currency library is not defined after loading script');
}
})
.catch(error => {
console.error('Error loading or evaluating currencies.js:', error);
});
{% else %}
console.debug('Convert: We are not on the thank you page');
{% endif %}
</script>
📊 Access your Convert Report
Once you complete your first purchase on your Shopify store:
You will start receiving revenue data in your report:
Live logs can also be used to verify the data:
🔌 Compatibility with other Upsell and Subscription Shopify Plugins
This integration is not currently compatible with other upsell and subscription plugins that use the Shopify API to create orders within Shopify.