Google Analytics Enhanced Ecommerce payload too big on checkout

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>