There are lots of ways to track activity on your EvolutionX store. This article is for developers who want to write Javascript to execute on the Thank you page where order confirmation happens. This page is special because it is the first page after an order is placed and includes order information that can be used for event tracking.
More Ways To Track
👍 Top Tip: You can read up on other options for analytics and tracking in these articles. These don't require a software developer.
Using the Data Layer for Order Details
On the thank you page we add a data layer with order and order line details for use in tracking javascript. Here are the fields available when viewing the window.dataLayer
Order ID is found at ecommerce → purchase → actionField → id
Total Order Value is found at ecommerce → purchase → actionField → revenue
Line items are found at ecommerce → purchase → products
Item SKU is found at ecommerce → purchase → products → [line id] → id
Here is an example data set found in window.dataLayer using the developer console of a browser:
1:
ecommerce:
purchase:
actionField:
affiliation: "Online Store"
coupon: ""
id: 1107632
revenue: 60
shipping: 0
tax: 0
products: Array(2)
0:
coupon: ""
id: "1010D-A"
metric1: ""
name: "Test Prod 1"
price: 10
quantity: 3
1:
coupon: ""
id: "1010D-B"
metric1: ""
name: "Test Prod 2"
price: 10
quantity: 3
Add Javascript to the order Thank You page
The thank you page is "open" for custom javascript as it is not part of the checkout.
You can write and add custom javascript to the head of your store. You can use custom Javascript anywhere except the checkout pages (thank you page supports custom Javascript). You can edit custom CSS and Javascript in the Admin by clicking Appearance → Theme Options and use the Head Block or Footer Block sections for Javascript.
A sample snippet of Javascript which targets the Thank you page would look like this:
<script type="text/javascript">
$(document).ready(function () {
if ($('body').hasClass('thankyou') {
// Text parsing with prefix
var transactionId = $('.order-ref > strong').text()
// Or using dataLayer to get the numeric transactionId
var transactionId = window.dataLayer[0].transactionId
// do whatever you need with google ad words or analytics
}
})
</script>