[TUTORIAL] How to integrate Google Analytics Enhanced Ecommerce with Prestashop

In this post, I’ll introduce you how to use Google Analytics Enhanced Ecommerce tracking with Prestashop ecommerce solution.

To start with, I’ll assume you already have the right Google Analytics tag enabled in your shop, to make sure of it :

  • check you have enabled Google Analytics Enhanced Ecommerce tracking in your GA’s user/property account
  • check HTML code in your shop, to be sure you have the right tracking code (if not, go in Prestashop backend, then modules > Google Analytics and enable it)

In this short tutorial, I’ll explain how to make it work on any product category with Prestashop 1.5. The process is slightly easier and different with Prestashop 1.6.

Like you probably know, Prestashop use the Smarty template engine for PHP. This is a very flexible tool, because it enables you to directly access shop’s data without messing with databases and PHP classes.

A typical Prestashop theme use many .tpl files, in this example we will enable product views and clicks at categories level, for example when someone browse your “pants” or “dresses” category in shop.

First hand, you need a good text editor for Windows, Mac or Linux to edit the product-list.tpl file in your theme’s directory.

For a typical setup, it would be in:

your Prestashop folder/themes/name_of_theme_you_use/product-list.tpl.

Next step is to edit this file and locate the loop which display each product in each category, it should look like that (PS 1.5):

{foreach from=$products item=product name=products}

{/foreach}

Once that is done, include or adapt these 2 parts of code inside each call to link or image (delimited by <li>…</li> calls):

A sample script to call for product impressions, that will fill in GA:

<script type=”text/javascript”>
ga(‘ec:addImpression’, {
‘id’: ‘{$product.id_product}’,
‘name’: ‘{$product.name}’,
‘category’: ‘{$category->name}’,
‘list’: ‘Listing catégories’
});
</script>

In this same file and around <li></li> tags for each product, a sample script to track product image or text links clicks:

<a href=”example link on image or text” onClick=”ga(‘ec:setAction’, ‘click’, { ‘list’: ‘Listing categories’ });”>example product name</a>

Of course, this is only a sample using basic Javascript, and not the best way to do it.

To make sure it works, upload the file on a test server and make sure to inspect code in Chrome or Firefox browser, and that Smarty values are well replaced by real product IDs, names, and categories.

Example for a client, Smarty values are working and well interpreted by  GA’s JavaScript:

capture5

If your Smarty and Javascript code is OK, it will provide you with a bunch of useful data in GA Ecommerce reports (for this example, go to GA > Conversions > Ecommerce > Product List Performance to get impressions and click data).

product-list-tpl-c

product-list-tpl-d

If not, feel free to use these resources to help you on that topic:

Google Analytics Enhanced Ecommerce Developers Guide 

Smarty template engine documentation

Prestashop variables (Google Docs)

I hope this helped you use Google Analytics Enhanced Ecommerce features, which are very handy.

If you want me to write more posts about it (for example transaction tracking), feel free to comment.