Using DataLayer of UA/GA3 or GA4

Dear Piwik Pro-Community,

I’d like to use an existing GA3 (Universal Analytics) or GA4 dataLayer for Piwik. Unfortunately both doesn’t work yet. For GA4 the reason might be that it’s in the second level of the DL. But what might be the reason for the DL of GA3?

Here is how the dataLayer look like (NAME is just a placeholder for our example)

<script>
                var dataLayer = window.dataLayer = window.dataLayer || [];
                dataLayer.push({
                    'event': 'confirmationPage',
                    'custom1': '1',                     'currencyCode': 'EUR',
                    'transactionId': '907152',                     'transactionAffiliation': 'Buchung',                     'transactionTotal': 185,                     'transactionTax': 0,
                    'transactionShipping': 0,
                    'transactionProducts': [{"sku":"NAME [1]","name":"NAME","category":"PKW","price":185,"quantity":1}],
                });

                // New Data-Layer
                window.dataLayer = window.dataLayer || [];
                dataLayer.push({
                    'event': 'purchase',
                    'ecommerce': {
                        'transaction_id': '12346',
                        'affiliation': 'Buchung',
                        'value': '185',
                        'tax': '0',
                        'shipping': '0',
                        'currency': 'EUR',
                        'coupon': '',
                        'items': [
    {
        "item_name": "NAME",
        "item_id": "NAME [1]",
        "price": 185,
        "item_category": "PKW",
        "quantity": 1
    }
],
                    },
                });
            </script>

The Piwik tag to fetch the data of the GA3-DL is:

(function () {

var products = {{ transactionProducts }};
  products.forEach(function(product){
    _paq.push(["addEcommerceItem", product.sku, product.name, product.category, product.price, product.quantity]);
  });
  _paq.push(["trackEcommerceOrder", {{ transactionID }}, {{ transactionTotal }}, "0", {{ transactionTax }}, {{ transactionShipping }}, "0"]);  

    })();

This tag is fired when DOM is ready and with a regex for the page url.

And yes, Administration > Reports > Ecommerce is activated :wink:

In the Debug view of the Piwik Tag Manager I can see, that the E-Commerce-Tag is fired on the order confirmation page. But unfortunately the variables are empty. And in the Tracker debugger of Piwik Analytics the purchase event doesn’t appear.

I know about one handicap:
Unfortunately our DL is in the body of the page. I know that it should be placed before the Piwik PRO’s container code, which is in the head of the page.

Is there a solution to use nevertheless this DL?

Best regards

Jürgen

Hi @Juergen,
Thanks for reaching out and welcome to our community forum. It’s good to have you here :).

The data layer structure looks good and it can definitely be used with Piwik PRO. Now let’s find out why your current setup doesn’t work and let’s fix it. Based on what you’ve described, I’d start with the following actions:

  • What are the definitions of the tag manager variables used in the script? (transactionProducts, transactionID, transactionTotal, transactionTax, transactionShipping). I’m asking because Piwik PRO Tag Manager doesn’t currently support building variables based on nested data layer object. You would need to capture the whole ecommerce object as the tag manager variable and then, based on it build javascript variables to be used in your tag.
  • The tag should be fired based on a Data layer event trigger (the purchase event).
  • Please make sure that all the arguments the for trackEcommerceOrder method are of correct type (string or number). Please do the same for the addEcommerceItem method.

I hope the above helps. If it doesn’t - please us know using this thread. We are always happy to help.

Thanks,
Piotr

Hi @pslonina ,

thank’s a lot for your feedback. :slight_smile:

  • I’ve changed the trigger: Data layer event equals purchase
  • I’ve checked: Both the arguments the for trackEcommerceOrder and for addEcommerceItem are correct.

So, I think it must be the first point you mentioned. Can you please explain in more detail what’s to do? How can I capture the whole ecommerce object as the tag manager variable and then build these javascript variables? Can you give me an example? That’d be great!

Best regards

Jürgen

Hi @Juergen ,
Most definitely, please see the example implementation for the New Data-Layer:

  1. Variable configuration:
    image

  2. Tag code:

<script>
  (function () {

var ecObject = {{ ecommerce }}
var products = {{ ecommerce }}.items
    
  products.forEach(function(product){
    _paq.push(["addEcommerceItem", product.item_id, product.item_name, product.item_category, product.price, product.quantity]);
  });
  _paq.push(["trackEcommerceOrder", ecObject.transaction_id, parseFloat(ecObject.value),, parseFloat(ecObject.tax), parseFloat(ecObject.shipping),]);  

    })();
</script>

Let me know if that helps. I can also do the same for the other data layer example you’ve provided.

Thanks,
Piotr

Hi @pslonina ,

Thank’s a lot for your feedback.

  • I’ve set a new variable ecommerce in the Piwik Pro Tag Manger.

  • I’ve tried your tag code both with and without the script-tag at the beginning and end of the code.

  • I’ve also tried a modified second variable, see:

<script>
(function () {

var ecObject = {{ ecommerce }};
var products = ecObject.items;
    
  products.forEach(function(product){
    _paq.push(["addEcommerceItem", product.item_id, product.item_name, product.item_category, product.price, product.quantity]);
  });
  _paq.push(["trackEcommerceOrder", ecObject.transaction_id, parseFloat(ecObject.value),, parseFloat(ecObject.tax), parseFloat(ecObject.shipping),]);  

    })();
</script>
  • I’ve also delete the second comma after parseFloat(ecObject.value),, (-> is it necessary?)

But none of the worked. In the Debugger I see that the tag is fired. But in the Tracker debugger of Piwik PRO Analytics the purchase event doesn’t appear.

I’m using the GTM to deliver PIWIK Pro and do all testings in the GTM Prev. There I call the ?_stg_debug to see the Piwik PRO debugger.

Do you have another idea what could be wrong? If it’d help I could also give you temporarily access to out Piwik PRO-Account.

Best regards

Jürgen

Hi @Juergen,
I’ve used the data layer object example you provided and the code that I provided to create a quick PoC. It’s available here.

Please press the button to Push a data layer event. Once pushed, the same code I provided above will be executed to successfully track the commerce order. You can preview the executed code in the tracker debugger.

Here’s the result from the tracker debugger:
image

I’m happy to provide you with read-only access to the Piwik PRO property I used to create the PoC so you could compare it with your setup.

Answering to your questions:

I’ve tried your tag code both with and without the script-tag at the beginning and end of the code.

The code needs to be between the <script> </script> tags

I’ve also delete the second comma after parseFloat(ecObject.value), (-> is it necessary?)

Yes, it is necessary, since the trackEcommerceOrder method expect specific attributes to be in specific places. Not all of them are mandatory, but all of them need to be in the correct spot.

Please let me know if the above helps

Hi @pslonina ,

thanks for your helpful feedback and the PoC. I really appreciate your efforts very much!

In your example everything works fine. So I’m really curious about your setting in the Piwik PRO Tag Manager property and what I’ve to change. So it’d be great if you provide me with read-only access. Can you give me this access for the e-mail-address, which I already use for my Piwik Pro Account? Or do you need an e-mail-address, which is not yet connected with an Piwik PRO account?

Best regards

Jürgen

@Juergen it should be a different email, but it can be an alias too. Please send me the e-mail address in a direct message.

Thanks,
Piotr

Hi @pslonina Please see my direct mail.

Best regards

Jürgen

Dear all,

Our Solution: Until now, we had delivered Piwik PRO via Google Tag Manager. We have changed that. Now the Piwik PRO script is implemented directly on the website. It is placed immediately after the opening body tag.

Furthermore, we have placed the DataLayer on the Order-Confirmation Pages in the Head instead of in the Body. So it’s delivered before Piwik PRO’s container code, as specified in the doc (see Set up ecommerce tracking | Piwik PRO help center).

And last but not least: There was a race condition. Thanx to @pslonina this could also be fixed by adding one line of code to the tag:
var _paq = _paq || [];

The Tag now looks like follows:
<script>
var _paq = _paq || [];
(function () {

var ecObject = {{ ecommerce }}
var products = {{ ecommerce }}.items

products.forEach(function(product){
_paq.push(["addEcommerceItem", product.item_id, product.item_name, product.item_category, product.price, product.quantity]);
});
_paq.push(["trackEcommerceOrder", ecObject.transaction_id, parseFloat(ecObject.value),, parseFloat(ecObject.tax), parseFloat(ecObject.shipping),]);

})();
</script>

Thanx @pslonina for your great support!

Best regards

Jürgen

3 Likes

Hey, I’m new around here and I just wanted to chime in to thank you both; @pslonina you for being very helpful, and @Juergen you for posting a final comment to give back to the community. Great job :raised_hands:

Önder

2 Likes