eCommerce Products not showing up

Hi there,

I have been trying to get ecommerce to work with Shopify and while visit tracking, orders and the cart are working, I cannot get products to show up. Here is the code I’m using:

 <!-- Piwik Product  -->
<script type="text/javascript">
  var _paq = _paq || [];

  // all parameters are optional, but we recommend to set at minimum productSKU and productName
  _paq.push(['setEcommerceView',
  "{{ product.selected_or_first_available_variant.sku }}", // (required) SKU: Product unique identifier
  "{{ product.title }}", // (optional) Product name
  "{% for collection in product.collections %}
    {{ collection.title }}
{% endfor %}", // (optional) Product category, or array of up to 5 categories
  {{ product.price | money_without_currency }} // (optional) Product Price as displayed on the page
  ]);

  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);

(function() {
    var u="//maverick.eduardoarellano.com/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '9']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<noscript><p><img src="//maverick.eduardoarellano.com/piwik.php?idsite=9&rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->

and this is the output when I view source on the product page:

  <!-- Piwik Product  -->
<script type="text/javascript">
  var _paq = _paq || [];

  // all parameters are optional, but we recommend to set at minimum productSKU and productName
  _paq.push(['setEcommerceView',
  "7589996-beads-k", // (required) SKU: Product unique identifier
  "Charm de Nuestra Inicial Abalorio Bañado en Plata de la A a la Z", // (optional) Product name
  "
Para tu Pandora
", // (optional) Product category, or array of up to 5 categories
  10.20 // (optional) Product Price as displayed on the page
  ]);

  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);

(function() {
var u="//maverick.eduardoarellano.com/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<noscript><p><img src="//maverick.eduardoarellano.com/piwik.php?idsite=9&rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->

It seems to be working but it isn’t getting sent to piwik.

Any help would be greatly appreciated.

Thanks

Bumping… Anyone offer any help?

Hi there,
well I wish I would have time but definitely, today is a busy day.
Ok not sure that’s the cleverest idea I ever got but:

  • I would create a fake Piwik instance in order to send test data;
  • I would use Custom JavaScript for websites - Chrome Web Store in order to inject the code you sent(the second one) and will try to debug it this way
    I may be able to find some time to work on it tonight but cannot promise anything.
    Hope it helps

Thanks for your replay. No worries if you don’t have time tonight. It will take me a day to setup a fake instance anyway. I’ll work on it and report back.

ok I think I have it.
You cannot use the code just like this, you need to use _paq.push([‘addEcommerceItem’, and _paq.push([‘trackEcommerceOrder’ before.
I used the code at https://piwik.org/docs/ecommerce-analytics/#tracking-ecommerce-orders-items-purchased-required and it worked straight away.
it is quite hugly but as previously mentioned I cannot really dig deep into it right now:

The cart is reporting just fine. What isn’t working, is the product tracking from the product page. I have been messing around a bit jus now and have realised that on the product page, I have the tracking script and then also the product tracking script. Would that cause an issue.

You can see the source at

https://iola.es/products/charm-de-nuestra-inicial-abalorio-banado-en-plata-de-la-a-a-la-z?variant=49857007635

Hi, just checking in here to see if you ever discovered why setEcommerceView wasn’t working. We’re having the same problem and can’t obtain any support.

Hi Fatica,

I found the problem, but haven’t found a solution. The problem in shopify in particular is having the piwik code twice on the page. You first have the JS tracking code on all the pages when you insert it through shopify backend. Then you have to insert the ecomm tracking code on the product page itself as well which creates a conflict between the two and doesn’t send the ecomm info to piwik.

Hope that helps

Hi @d4mer,

I am not sure I understand why you got the tracking code twice.

You only need to insert the tracking code once on all pages.

On the product page it should be enough to just call the ecommerce tracking functions like _paq.push(['trackEcommerceOrder', "A10000123",[etc.]);
There is no need to duplicate the part that includes

    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);

Ah ok…I will give this a try and report back

So if I do this:

<!-- Piwik Product  -->
<script type="text/javascript">
 
  // all parameters are optional, but we recommend to set at minimum productSKU and productName
  _paq.push(['setEcommerceView',
  "{{ product.selected_or_first_available_variant.sku }}", // (required) SKU: Product unique identifier
  "{{ product.title }}", // (optional) Product name
  "{% for collection in product.collections %}
    {{ collection.title }}
{% endfor %}", // (optional) Product category, or array of up to 5 categories
  {{ product.price | money_without_currency }} // (optional) Product Price as displayed on the page
  ]);

<!-- End Piwik Code -->

This should be enough?

Thanks for replying. This wasn’t our issue, but I appreciate the reply.

Hey D4mer, am trying to setup the cart for shopify and was wondering if you would be so kind and share your code :slight_smile: please :slight_smile: