Thursday, May 07, 2015

PrestaShop 1.5/1.6 and the Google Tag Manager


Adding Page View Tracking

Most PrestaShop themes use one header.tpl for all pages on the site. This post assumes that is the case with your theme... if not, apply everything about header.tpl to all your headers.
  • Set up a GTM (Google Tag Manager) container, etc., and copy out the GTM snippet
  • open header.tpl
  • Look for the body tag
  • IMMEDIATELY after the end of the body tag, add...
     {literal}
    [your GTM snippet]
    {/literal}

    e.g.
  • NOTE FROM 2018: This article is rather old, and the newest GTM installation code from Google also talks about adding code right after the "head" tag, which could also be done in the header.tpl file. Thanks to Oliver Gerber for pointing that out.
  • Add a tracking tag to GTM
  • Preview and debug your GTM code.
  • Publish the GTM container

Adding Transaction (Conversion) Tracking

Adding page view tracking is super simple. Adding conversion tracking requires a data layer, which I added with a module.
IMPORTANT: For this code to fire, your payment method modules need to be calling PrestaShop after payment. E.g. here are the changes I needed to make to get this to happen with PayPal. As far as I can tell, this "problem" exists for both my module, and for the PrestaShop Google Analytics module.
  • Install the PrestaShop module "Data Layer Module" (instructions for installing a PrestaShop module can be found in the PrestaShop Documentation). This is simply a copy of the ganalytics module with lots of code removed and analytics JavaScript adapted to the GTM. It's a VERY basic module that any PHP coder can understand and expand on.
  • In GTM, add a new Google Analytics transaction tag... named something like "PrestaShop Conversion"
  • Add a firing rule (a.k.a. a Trigger) named e.g. "Order Confirmation" with values {{event}} equals prestashop_order_confirmation (prestashop_order_confirmation is an event that I trigger in the Data Layer Module) for the conversion tag.
  • Preview and debug your conversion tracking.
  • Publish the GTM container

Adding Site Speed Tracking

Speed of your website is fundamental to a good conversion rate. In addition, it effects your ranking in the serps. Monitoring your page speed is an important KPI.
By default, GTM and GA track your site speed, but using only a 5% sampling rate. That's perfect if your Amazon, but many sites need 100% sampling to get good data. Here's how to get this up.

  • In GTM, open your page view tracking tag
  • In the "Fields to Set" section, add a new field called "siteSpeedSampleRate"
  • Set the value to 100 (= 100%) 
  • Preview and debug your GTM code.
  • Publish the GTM container

Notes

  • Always push when using the data layer! See Simo Ahava's article on the subject. Actually, read all of Simo Ahava's articles... he's a great resource.
  • This code was written for a site which only has PayPal as a payment option. Theoretically, it should work for other gateways (it's not at all PayPal specific). I would be interested in hearing of your results if you use this with other payment gateways.

No comments: