Big Bang (bigbang.hr) - Checkout & GTM DataLayer

Big Bang is a Croatian electronics retailer. The site is a Nuxt.js (Vue 3 SSR) SPA with jQuery UI for some widgets. GTM container GTM-5F34ZXDL, GA4 property G-QEEZK92T3P.

URL patterns

• Homepage: https://www.bigbang.hr
• Product: https://www.bigbang.hr/webshop/<slug>/<sku>
• Cart: https://www.bigbang.hr/webshop/kosarica/
• Checkout: https://www.bigbang.hr/webshop/kupac/ (all 3 steps live on this URL - SPA routing)

Checkout flow (3 steps, same URL)

1. Podaci kupca (Customer data) - name, address, location, email, phone
2. Način dostave (Delivery method) - package, pickup, parcel locker
3. Odabir plaćanja i završetak kupnje (Payment selection) - card, KEKS Pay, bank transfer

Framework quirks - form filling

Vue's reactive data model ignores programmatic .value = changes. Two approaches that work:

Native input value setter (works for most fields)

function setVal(id, value) {
    const el = document.getElementById(id);
    const setter = Object.getOwnPropertyDescriptor(
        window.HTMLInputElement.prototype, "value"
    ).set;
    setter.call(el, value);
    el.dispatchEvent(new Event("input", { bubbles: true }));
    el.dispatchEvent(new Event("change", { bubbles: true }));
}
setVal("first_name", "Test");
setVal("last_name", "Korisnik");
setVal("address", "Testna ulica 1");
setVal("email", "test@example.com");
setVal("phone", "00385911234567");

Location autocomplete (jQuery UI - needs CDP keyboard input)

The #location field uses jQuery UI Autocomplete (ul.ui-autocomplete.locations-ui-autocomplete). The native setter trick does NOT work here - it won't trigger the autocomplete dropdown or populate the dependent #zipcode and #city fields.

Instead, use real keyboard input via CDP:

js("document.getElementById('location').focus()")
cdp("Input.insertText", text="10000")
# Wait for autocomplete dropdown to appear (~500ms)
# Select from dropdown: li.ui-menu-item inside ul.locations-ui-autocomplete
# Use getBoundingClientRect() on the first li, then click_at_xy()
# This auto-populates #zipcode and #city

Stable form field IDs

#first_name, #last_name, #address, #location, #zipcode, #city, #email, #phone

Continue buttons

The continue buttons are button elements. JS .click() works but coordinate clicks can miss due to sidebar layout shifts. Prefer:

[...document.querySelectorAll("button")]
    .find(b => b.textContent.includes("Nastavi"))
    .click()

Step 1 button text: "Nastavi na odabir načina dostave" Step 2 button text: "Nastavi na plaćanje" Final button text: "Potvrdi i naruči"

GTM dataLayer events

The dataLayer fires standard GA4 ecommerce events:

add_payment_info quirk: The event fires when the payment step loads, before the user selects a payment method. The payment_type in the payload reflects the default pre-selected option ("opca_uplatnica_hr" = bank transfer), not the user's choice. The event also fires multiple times (observed 4x) - likely duplicate GTM triggers.

DataLayer interceptor pattern

The SPA preserves JS state across checkout steps (client-side routing), so a push interceptor installed once survives all 3 steps:

window.__dlEvents = [];
// Seed dataLayer first — GTM may not have loaded yet when the snippet runs,
// in which case window.dataLayer is undefined and .push.bind would throw.
// Seeding with [] is safe: GTM picks up an existing array on init.
window.dataLayer = window.dataLayer || [];
const origPush = window.dataLayer.push.bind(window.dataLayer);
window.dataLayer.push = function() {
    for (let i = 0; i < arguments.length; i++) {
        const entry = arguments[i];
        if (entry && entry.event) {
            window.__dlEvents.push({
                event: entry.event,
                ecommerce: entry.ecommerce
                    ? JSON.stringify(entry.ecommerce).substring(0, 500)
                    : undefined,
                timestamp: new Date().toISOString()
            });
        }
    }
    return origPush.apply(window.dataLayer, arguments);
};

Read captured events: js("JSON.stringify(window.__dlEvents)")

Payment methods (step 3)

• Plaćanje karticama - card payment
• KEKS Pay - mobile payment
• Virmansko plaćanje - bank transfer (default, pre-selected)
• HT vrijednosni bon - expandable voucher section

checkout.md · updated May 2, 2026 · 581 words