CODEWITHSUNDEEP
google-analyticse-commerceanalytics
Guy Korland
Guy Korland

Reputation: 9568

Google Analytics Enhanced Ecommerce payload too big on checkout

It seems like:

ga('send', 'pageview');

Doesn't know how to handle large payload (over 8K), when we're sending a large transaction with more than 100 products, the page impression just tries to send all the items in a single beacon post.

products.forEach(product => ga('ec:addProduct', ...) ) // 100 products
ga('ec:setAction', 'purchase', ...)
ga('send', 'pageview');

Which results in 

raven.js:80 Payload size is too large (11352).  Max allowed is 8192.

We are just following the documentation on: enhanced-ecommerce#measuring-transactions

Upvotes: 9

Views: 4066

Answers (2)

Guy Korland
Guy Korland

Reputation: 9568

After couple of tests it seems like we found the solution, we broke the transaction to batches of 20 items and at the end we send the transaction global data (like tax and shipping). Each batch is connected to the transaction by sending the transaction id.

            //break the transaction of batches of 20 items
            var idArrays = splitArray(Object.keys(cart.lines), 20),
                transaction = { id: order.id };
                angular.forEach(idArrays, function(ids){
                   angular.forEach(ids, function (id) {
                      var analyticsLine = analyticsCart(cart.lines[id]);
                      ga('ec:addProduct', analyticsLine);
                   });

                   // connect the batch to the transaction 
                   ga('ec:setAction', 'purchase', transaction);
                   ga('send', 'event', 'Checkout', 'Purchase', 'items batch');
                });

            //Send the transaction total data
            var fullTransaction = {
                id: order.id,
                tax: cart.tax,
                shipping: cart.deliveryCost
            };
            ga('ec:setAction', 'purchase', fullTransaction);
            ga('send', 'event', 'Checkout', 'Purchase', 'transaction details');

Upvotes: 2

Tony Vincent
Tony Vincent

Reputation: 14272

The limit for a HTTP request to the Google Analytics endpoint is 8Kb (or more exactly 8192 bytes).
There is an excellent blog here discussing how to manage this overflow.
The idea is if the number of objects (products) in the array is larger than your defined number, let’s say 35, and a visitor has selected to show 100 products, the solution is to automatically send the data in 3 hits to avoid hitting the 8Kb limit.

<script>
if (product.length > 0 || promo.length > 0) {
    var maxProducts = 35;                   // Max objects that will be sent with 1 hit.
    var ecomm = product.concat(promo);      // Merge product & promo into 1 array that we use in the add to cart & click tracking.
while(product.length || promo.length) {
    var p1 = product.splice(0,maxProducts); // Split the product array into arrays with max 35 objects
    var p2 = promo.splice(0,maxProducts);   // Split the promo array into arrays with max 35 objects
    dataLayer.push({
        'ecommerce': {
            'promoView': {
                'promotions': p2
                },
            'impressions': p1
        },
        'event': 'impression', // GTM Event for Impression tracking
        'eventCategory':'Ecommerce','eventAction':'Impression'
        });
    };
};
</script>

Upvotes: 4

Related Questions