Google Analytics Enhanced Ecommerce payload too big on checkout - google-analytics

Question

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

Answer 1

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>

Answer 2

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');