Examples Edit the file on GitHub
The document demonstrates working example implementations to successfully track your sales. Typically, an implementation consists of the following steps:
- Prepare the Ecommerce data (order, items) on the server
- Load the Analytics.js library
- Report the Ecommerce data
Table of Contents
Prepare Ecommerce data
The first step is to prepare the Ecommerce data of a completed order.
Analytics reports data using the user's browser. Thus, some server-side logic is required to dynamically provide the ecommerce data to the browser for the Analytics client to report them.
Server-side Ecommerce data structure
Typically, the Ecommerce data on the server-side could have the following structure:
<?php
// Example of an Order to report with Analytics
$order = array(
'order_id' => '123456',
'revenue' => '1840.38',
'shipping' => '3.50',
'tax' => '422.49',
'paid_by' => 'example_paid_by',
'paid_by_descr' => 'Example paid_by_descr'
);
// Example of Order Items to report with Analytics
$items = array();
$items[0] = array(
'order_id' => '123456',
'product_id' => 'product_id_1'
'name' => 'Apple IPhone 6 Plus (16GB) Space Gray EU',
'price' => '654.90',
'quantity' => 1
);
$items[1] = array(
'order_id' => '123456',
'product_id' => 'product_id_2'
'name' => 'Motorola Nexus 6 (64GB) EU Light Gray',
'price' => '590.99',
'quantity' => 2
);
?>
JavaScript representation of Ecommerce data
Example server-side snippets to transform Ecommerce data on the server for into JavaScript strings for Analytics could look like:
<?php
/**
* Builds an Analytics Ecommerce addOrder action.
*
* @param array $order The completed order to report.
* @return string The JavaScript representation of an Analytics Ecommerce addOrder action.
*/
function addOrderAction(&$order) {
$order_data = json_encode($order);
return "skroutz_analytics('ecommerce', 'addOrder', $order_data);";
}
/**
* Builds an Analytics Ecommerce addItem action.
*
* @param array $order The completed order to report.
* @param array $item The purchesed product to report, part of this order.
* @return string The JavaScript representation of an Analytics Ecommerce addItem action.
*/
function addItemAction(&$order, &$item) {
$item_data = json_encode(array(
'order_id' => $order['order_id'],
'product_id' => $item['product_id'],
'name' => $item['name'],
'price' => $item['price'],
'quantity' => $item['quantity']
));
return "skroutz_analytics('ecommerce', 'addItem', $item_data);";
}
?>
Load Analytics.js
Next, add the Analytics.js tracking code to enable Analytics on your website.
You may add it just before closing either the <head>
or <body>
section.
<!-- Add the Tracking Script and Connect to your Account -->
<script>
(function(a,b,c,d,e,f,g){a['SkroutzAnalyticsObject']=e;a[e]= a[e] || function(){
(a[e].q = a[e].q || []).push(arguments);};f=b.createElement(c);f.async=true;
f.src=d;g=b.getElementsByTagName(c)[0];g.parentNode.insertBefore(f,g);
})(window,document,'script','https://skroutza.skroutz.gr/skroutza.min.js','skroutz_analytics');
skroutz_analytics('session', 'connect', 'SA-XXXX-YYYY'); // Connect your Account.
</script>
Note
You have to replace the
'SA-XXXX-YYYY'
property with the actual Shop Account ID you received from us.
For your shop to report all required data to Analytics you must proceed to the next step.
Report Ecommerce data
Finally, additional server-side logic is required to dynamically output the
transformed Ecommerce data. Before the closing tag of the </body>
add the
following snippet, for the declaration of Analytics actions to happen:
<!--
Add this script at the final step of your checkout process, after a user has successfully
completed a purchase. Usually this is the "Thank You" or "Receipt" page.
-->
<script>
<?php
// Print the Analytics Ecommerce AddOrder action
echo addOrderAction($order);
// Print each Analytics Ecommerce AddItem action
foreach ($items as &$item) {
echo addItemAction($order, $item);
}
?>
</script>
Note
Be sure to report any data after the Analytics.js declaration.