Custom tracking code on the Order Confirmation page
If you are running an advertising campaign, or you’ve set up an affiliate marketing program using a third-party service, you can measure the results by adding the conversion tracking code provided by that company to your store. Tracking codes are typically installed on the Order Confirmation page – the last page which shoppers see after placing their orders.
To start tracking conversions get the tracking code from the affiliate or third-party service you want to use, add variables supported by Ecwid to that code, and paste it to the special section in your Ecwid admin, in the Setting → General → Tracking & Analytics page.
Adding a custom tracking code to your Ecwid store
Usually affiliate or advertising services require that you paste their tracking script to the Order Confirmation page of the shopping cart. The Order Confirmation page is the page where buyers see the “Thank you for your order” message after placing their orders; its URL ends with /checkout/order-confirmation.
There is a special section in the Ecwid admin panel where you can put such a pixel code, and it will be executed every time a buyer reaches the Order Confirmation page.
To insert a third-party tracking code in the Order Confirmation page of your Ecwid store:
- From your Ecwid admin, go to Settings → General → Tracking & Analytics.
- Scroll down to the Custom tracking code on Order Confirmation page section and click the toggle. You will see a pop-up:
- Add your custom code in the Custom tracking code on Order Confirmation page box in the pop-up. If you need to add several codes, paste them one after another in this area.
- Click Save.
Once added, your tracking code will be executed each time a customer reaches the Order Confirmation page in your store.
Adding Ecwid variables to a custom tracking code
If you need to pass order details onto a tracking service, you will need to modify their tracking code by adding variables that are supported in Ecwid. These are the same variables that you can see in the Ecwid email templates. See the full list of available variables.
You can insert HTML and Javascript codes into the Order Confirmation page — Ecwid variables will work with both types of code. However, there is a slight difference in how you should paste the variables into these codes.
HTML
When you use an HTML custom code, you will need to paste the variables in it "as is":
${order.total}, ${customer.name}, ${order.number}, etc.
Here is an example of how these variables will look in an HTML code:
<img src="https://tracking_pixel.com?order-id=${order.number}&amount=${order.total}" />
Javascript
When you use a Javascript tracking code, you will need to add the following to your code (along with the variables):
1. Surround your code with the <#noescape> tags so that the data is passed on in the correct format:
<script>
<#noescape>
…
</#noescape>
</script>
Here is an example of how these variables will look in a Javascript code:
<script>
<#noescape>
<#list order.items as orderItem>
console.log("Item price is ${orderItem.price}")
</#list>
</#noescape>
</script>
2. Add ?js_string to the variables that pass a text. For example, you will need to use ?js_string with variables like ${customer.name} and ${orderItem.name}. Yet you don’t need to add it to variables that pass numbers, like order total and order number.
Here is an example of how these variables will look in a Javascript code:
"order_id": "${order.number}",
"email": "${customer.email?js_string}",
"delivery_country": "${order.billingAddress.countryCode?js_string}"