@vio-live/web-sdk 0.36.0 → 0.37.0

package/dist/{chunk-DEREQRCM.js → chunk-LDA7RI43.js}

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, resolveDetailLayout, toCampaignId, getGlobalCurrency, copyAppliedLayout, onGlobalDetailLayoutChange, layoutSignature, layoutOriginOf, ensureVippsButton, formatPrice, currentGlobalDescriptionLabel, shippingDescriptionOf, buyerRefOf, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, storageGet, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, getGlobalCountryCode, isValidPhone, gatewayHasBuyerRef, rememberedCheckoutSponsor, checkoutSponsorOf, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, sponsorIdentityFrom, Configuration, normalizeScope, campaignCandidates } from './chunk-6PQFXUOW.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, resolveDetailLayout, toCampaignId, getGlobalCurrency, layoutOriginOf, copyAppliedLayout, onGlobalDetailLayoutChange, layoutSignature, ensureVippsButton, formatPrice, currentGlobalDescriptionLabel, shippingDescriptionOf, lineOrigins, buyerRefOf, nexiReturnPaymentId, readNexiPending, kustomReturnOutcome, KUSTOM_RETURN_QUERY_KEYS, storageGet, ADYEN_RETURN_METHOD, adyenReturnParams, ADYEN_RETURN_QUERY_KEYS, adyenReturnOutcome, getGlobalCountryCode, isValidPhone, gatewayHasBuyerRef, rememberedCheckoutSponsor, checkoutSponsorOf, AdyenOriginError, normalizeSlotId, autoSlotDisplayName, autoSlotId, sponsorIdentityFrom, Configuration, normalizeScope, campaignCandidates, ctaText } from './chunk-KVI56NGO.js';
 import { LitElement, css, html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -373,6 +373,61 @@ function closestAcrossShadow(start, selector) {
   return null;
 }
 
+// src/ui/cta.ts
+function labelOf(button) {
+  if (button.hasAttribute("data-vio-cta-label")) return ctaText(button.getAttribute("data-vio-cta-label"));
+  return ctaText(button.getAttribute("aria-label")) ?? ctaText(button.textContent);
+}
+function emitCta(host, location, cta, contextOf, extra = {}, button = null) {
+  try {
+    const context = contextOf(cta, button);
+    if (context === null) return;
+    const detail = { ...context, ...stripUndefined(extra), cta, location };
+    host.dispatchEvent(new CustomEvent("vio:cta-click", { bubbles: true, composed: true, detail }));
+  } catch {
+  }
+}
+function stripUndefined(obj) {
+  const out = {};
+  for (const [k, v] of Object.entries(obj)) if (v !== void 0) out[k] = v;
+  return out;
+}
+function trackCtaClicks(host, location, contextOf) {
+  const root = host.renderRoot ?? host.shadowRoot;
+  if (!root || typeof root.addEventListener !== "function") return () => {
+  };
+  const onClick = (ev) => {
+    try {
+      const button = markedButton(ev, root);
+      if (!button) return;
+      const cta = button.getAttribute("data-vio-cta") ?? "";
+      if (button.tagName === "SUMMARY" && button.parentElement?.open) return;
+      const option = button.getAttribute("data-vio-cta-option");
+      emitCta(
+        host,
+        location,
+        cta,
+        contextOf,
+        { label: labelOf(button), ...option !== null ? { optionValue: option } : {} },
+        button
+      );
+    } catch {
+    }
+  };
+  root.addEventListener("click", onClick, { capture: true });
+  return () => root.removeEventListener("click", onClick, { capture: true });
+}
+function markedButton(ev, root) {
+  const path = typeof ev.composedPath === "function" ? ev.composedPath() : [];
+  for (const node of path) {
+    if (node === root) break;
+    if (!(node instanceof Element)) continue;
+    if (node.getRootNode() !== root) continue;
+    if (node.hasAttribute("data-vio-cta")) return node;
+  }
+  return null;
+}
+
 // src/ui/components/vio-product.ts
 var VioProduct = class extends LitElement {
   constructor() {
@@ -405,6 +460,21 @@ var VioProduct = class extends LitElement {
     this.cartQty = 0;
     this.justAdded = false;
     this.boundCartChange = () => this.updateInCart();
+    /** Stops reporting the taps on the buttons (`vio:cta-click`). */
+    this.stopCtaClicks = null;
+    /** What a tap on the card says (`vio:cta-click`): its product, sponsor and attribution. */
+    this.ctaContext = () => {
+      const a = this.attribution();
+      return {
+        productId: this.productId || void 0,
+        sponsorId: this.sponsorId || this.sponsorFromAttribution(),
+        campaignId: a.campaignId,
+        slot: a.slot,
+        contentId: a.contentId,
+        contentTitle: a.contentTitle,
+        componentTemplateId: a.componentTemplateId
+      };
+    };
   }
   /** The slot id in effect: `vio-slot`, else the auto id (`card-N`). Read-only. */
   get effectiveSlot() {
@@ -609,8 +679,12 @@ var VioProduct = class extends LitElement {
     this.updateInCart();
     this.slotRegistration.connect(this.slotAttributes());
     Vio.cart.addEventListener("change", this.boundCartChange);
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = trackCtaClicks(this, "card", this.ctaContext);
   }
   disconnectedCallback() {
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = null;
     Vio.cart.removeEventListener("change", this.boundCartChange);
     this.slotRegistration.clear();
     super.disconnectedCallback();
@@ -660,6 +734,7 @@ var VioProduct = class extends LitElement {
   onKeydown(e) {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
+      if (e.target === e.currentTarget) emitCta(this, "card", "open", this.ctaContext);
       this.onClick();
     }
   }
@@ -710,6 +785,8 @@ var VioProduct = class extends LitElement {
     return html`
       <div
         class="card"
+        data-vio-cta="open"
+        data-vio-cta-label=""
         @click=${this.onClick}
         @keydown=${this.onKeydown}
         role="button"
@@ -720,6 +797,8 @@ var VioProduct = class extends LitElement {
           ${this.imageUrl ? html`<img src=${this.imageUrl} alt=${this.name || this.brand} loading="lazy" />` : ""}
           ${this.buttonStyle === "icon" ? html`<button
             class="add-btn ${this.inCart ? "in-cart" : ""} ${this.justAdded ? "pop" : ""}"
+            data-vio-cta="add"
+            data-vio-cta-label="Legg i kurv"
             @click=${this.onAdd}
             aria-label=${this.inCart ? "I handlekurven \u2013 legg til en til" : "Legg i kurv"}
             title=${this.inCart ? "I handlekurven" : "Legg i kurv"}
@@ -740,7 +819,7 @@ var VioProduct = class extends LitElement {
           ${this.showDescription && this.description ? html`<p class="description">${this.description}</p>` : ""}
           ${this.price ? html`<div class="price">${this.price}</div>` : ""}
           ${this.retailer ? html`<div class="retailer">${this.retailer}</div>` : ""}
-          ${this.buttonStyle === "bar" ? html`<button class="bar-btn ${this.justAdded ? "pop" : ""}" @click=${this.onAdd}>
+          ${this.buttonStyle === "bar" ? html`<button class="bar-btn ${this.justAdded ? "pop" : ""}" data-vio-cta="add" data-vio-cta-label=${this.buttonLabel} @click=${this.onAdd}>
                 ${this.inCart ? `${this.buttonLabel} \xB7 ${this.cartQty}` : this.buttonLabel}
               </button>` : ""}
         </div>`}
@@ -2265,12 +2344,54 @@ var VioProductDetail = class extends LitElement {
       this.show();
       void this.fetchProduct();
     };
+    /** Stops reporting the taps on the buttons (`vio:cta-click`). */
+    this.stopCtaClicks = null;
+    /** The product open when the shopper last changed photo: `gallery_swipe` once per open. */
+    this.gallerySwipedFor = null;
+    /** A finger, a pen or a wheel is on the carousel: its scroll is the shopper's swipe, not the SDK's. */
+    this.galleryGesture = false;
+    /**
+     * What a tap on a button of the detail says (`vio:cta-click`, README
+     * «Button tracking»): the open product and the variant chosen (when every
+     * option is), its sponsor and attribution, and the layout shown (only a
+     * non-default one). `gallery_swipe` only once per open product.
+     */
+    this.ctaContext = (cta) => {
+      const product = this.product;
+      if (cta === "gallery_swipe") {
+        if (!product || this.gallerySwipedFor === product) return null;
+        this.gallerySwipedFor = product;
+      }
+      const a = this.attribution();
+      const variants = Array.isArray(product?.variants) ? product.variants : [];
+      const variant = product && (variants.length === 1 || !this.missingOption()) ? this.selectedVariant() : null;
+      const layout = layoutOriginOf(this.layoutNow);
+      return {
+        productId: product?.id ?? (this.productId || void 0),
+        productVariantId: variant?.id,
+        sponsorId: this.sponsorId > 0 ? this.sponsorId : void 0,
+        campaignId: a.campaignId,
+        slot: a.slot,
+        contentId: a.contentId,
+        contentTitle: a.contentTitle,
+        componentTemplateId: a.componentTemplateId,
+        layout: layout.layoutId ? layout : null
+      };
+    };
+    /** The carousel scrolled under the shopper's finger: their first swipe of this product. */
+    this.onGalleryGesture = () => {
+      this.galleryGesture = true;
+    };
     /** The cart changed (another tab, the drawer): the line under Vipps counts it again. */
     this.boundCartChange = () => {
       if (this.open) this.requestUpdate();
     };
     /** The photo in view is the active one (dots, Apple Pay sheet, events). */
     this.onCarouselScroll = () => {
+      if (this.galleryGesture) {
+        this.galleryGesture = false;
+        emitCta(this, "detail", "gallery_swipe", this.ctaContext);
+      }
       const track = this.carouselTrack();
       const step = this.carouselStep(track);
       if (!track || !step) return;
@@ -3286,12 +3407,16 @@ var VioProductDetail = class extends LitElement {
     this.slotRegistration.connect(this.slotAttributes());
     void this.loadVippsButton();
     document.addEventListener("vio:product-click", this.boundProductClick);
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = trackCtaClicks(this, "detail", this.ctaContext);
   }
   disconnectedCallback() {
     if (this.addedToastTimer) clearTimeout(this.addedToastTimer);
     this.addedToastTimer = null;
     document.removeEventListener("vio:product-click", this.boundProductClick);
     Vio.cart.removeEventListener("change", this.boundCartChange);
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = null;
     this.slotRegistration.clear();
     this.bottomSheet.disconnect();
     this.unsubscribeLayout?.();
@@ -3961,7 +4086,7 @@ var VioProductDetail = class extends LitElement {
       <div class="added-toast" part="added-toast" role="status" aria-live="polite">
         <div class="added-toast-text">Lagt i handlekurven</div>
         <div class="added-toast-actions">
-          <button class="added-toast-checkout" part="added-toast-checkout" @click=${this.toastToCheckout}>Til kassen</button>
+          <button class="added-toast-checkout" part="added-toast-checkout" data-vio-cta="checkout" @click=${this.toastToCheckout}>Til kassen</button>
           <button class="added-toast-continue" part="added-toast-continue" @click=${this.hideAddedToast}>Fortsett å handle</button>
         </div>
       </div>
@@ -4224,7 +4349,14 @@ var VioProductDetail = class extends LitElement {
     const current2 = Math.min(this.activeImageIndex, Math.max(0, count - 1));
     return html`
       <div class="gallery carousel" part="gallery">
-        <div class="carousel-track" part="image" @scroll=${this.onCarouselScroll}>
+        <div
+          class="carousel-track"
+          part="image"
+          @scroll=${this.onCarouselScroll}
+          @pointerdown=${this.onGalleryGesture}
+          @touchstart=${this.onGalleryGesture}
+          @wheel=${this.onGalleryGesture}
+        >
           ${images.map(
       (img, idx) => html`
               <div class="carousel-slide" part="slide" aria-label=${`Bilde ${idx + 1} av ${count}`}>
@@ -4238,6 +4370,7 @@ var VioProductDetail = class extends LitElement {
                 class="carousel-arrow prev"
                 part="carousel-arrow"
                 aria-label="Forrige bilde"
+                data-vio-cta="gallery_swipe"
                 ?disabled=${current2 === 0}
                 @click=${() => this.stepCarousel(-1)}
               >‹</button>
@@ -4245,6 +4378,7 @@ var VioProductDetail = class extends LitElement {
                 class="carousel-arrow next"
                 part="carousel-arrow"
                 aria-label="Neste bilde"
+                data-vio-cta="gallery_swipe"
                 ?disabled=${current2 === count - 1}
                 @click=${() => this.stepCarousel(1)}
               >›</button>
@@ -4278,10 +4412,16 @@ var VioProductDetail = class extends LitElement {
     const toggle = () => {
       if (foldable) this.descriptionOpen = !this.descriptionOpen;
     };
+    const opens = foldable && !open ? "description_open" : nothing;
     return html`<div class="description-block description-preview ${open ? "open" : ""} ${foldable ? "clipped" : ""} ${mode}" part="description">
-      <button class="desc-head" type="button" aria-expanded=${open ? "true" : "false"} @click=${toggle}>${this.descriptionHeading()}</button>
-      ${mode === "folded" && !open ? nothing : html`<div class="description ${open ? "" : "collapsed"}" @click=${() => !this.descriptionOpen && toggle()}>${text}</div>`}
-      ${mode === "preview" && this.descriptionClipped ? html`<button class="desc-more" type="button" @click=${toggle}>${this.descriptionOpen ? "Vis mindre" : "Les mer"}</button>` : nothing}
+      <button class="desc-head" type="button" aria-expanded=${open ? "true" : "false"} data-vio-cta=${opens} @click=${toggle}>${this.descriptionHeading()}</button>
+      ${mode === "folded" && !open ? nothing : html`<div
+            class="description ${open ? "" : "collapsed"}"
+            data-vio-cta=${opens}
+            data-vio-cta-label=${opens === nothing ? nothing : this.descriptionHeading()}
+            @click=${() => !this.descriptionOpen && toggle()}
+          >${text}</div>`}
+      ${mode === "preview" && this.descriptionClipped ? html`<button class="desc-more" type="button" data-vio-cta=${opens} @click=${toggle}>${this.descriptionOpen ? "Vis mindre" : "Les mer"}</button>` : nothing}
     </div>`;
   }
   /** Is the preview hiding part of the text? Measured with the preview applied. */
@@ -4315,11 +4455,11 @@ var VioProductDetail = class extends LitElement {
     const perRateTime = times.length > 1;
     const sharedTime = times.length === 1 ? times[0] : times.length === 0 && this.deliveryTime.trim() ? `Leveringstid: ${this.deliveryTime.trim()}` : "";
     const links = [
-      identity?.refundPolicyUrl ? html`<a href=${identity.refundPolicyUrl} target="_blank" rel="noopener noreferrer">Angrerett og retur</a>` : null,
-      identity?.termsUrl ? html`<a href=${identity.termsUrl} target="_blank" rel="noopener noreferrer">Kjøpsvilkår</a>` : null
+      identity?.refundPolicyUrl ? html`<a href=${identity.refundPolicyUrl} target="_blank" rel="noopener noreferrer" data-vio-cta="refund_link">Angrerett og retur</a>` : null,
+      identity?.termsUrl ? html`<a href=${identity.termsUrl} target="_blank" rel="noopener noreferrer" data-vio-cta="terms_link">Kjøpsvilkår</a>` : null
     ].filter(Boolean);
     return html`<details class="description-block shipping-returns" part="shipping-returns">
-      <summary>Frakt &amp; retur</summary>
+      <summary data-vio-cta="shipping_returns_open">Frakt &amp; retur</summary>
       <div class="description shipping-returns-body">
         <div class="sr-title">Frakt</div>
         ${rates.length ? html`<ul class="sr-rates">
@@ -4402,8 +4542,8 @@ var VioProductDetail = class extends LitElement {
     const name = identity?.name || this.headerName();
     if (!name) return nothing;
     const links = [
-      identity?.termsUrl ? html`<a href=${identity.termsUrl} target="_blank" rel="noopener noreferrer" part="seller-terms">Kjøpsvilkår</a>` : null,
-      identity?.refundPolicyUrl ? html`<a href=${identity.refundPolicyUrl} target="_blank" rel="noopener noreferrer" part="seller-refund">Angrerett og retur</a>` : null
+      identity?.termsUrl ? html`<a href=${identity.termsUrl} target="_blank" rel="noopener noreferrer" part="seller-terms" data-vio-cta="terms_link">Kjøpsvilkår</a>` : null,
+      identity?.refundPolicyUrl ? html`<a href=${identity.refundPolicyUrl} target="_blank" rel="noopener noreferrer" part="seller-refund" data-vio-cta="refund_link">Angrerett og retur</a>` : null
     ].filter(Boolean);
     return html`<p class="seller-note" part="seller-note">
       Du handler direkte hos <strong>${name}</strong>.${links.length ? html`<span class="seller-links">${links}</span>` : nothing}
@@ -4427,12 +4567,12 @@ var VioProductDetail = class extends LitElement {
   }
   render() {
     return html`
-      <div class="backdrop" @click=${this.close}></div>
+      <div class="backdrop" data-vio-cta="close" data-vio-cta-label="" @click=${this.close}></div>
       <div class="modal" role="dialog" aria-modal="true" aria-label="Produkt" tabindex="-1">
-        <div class="handle" @click=${this.close} aria-hidden="true"></div>
+        <div class="handle" data-vio-cta="close" data-vio-cta-label="" @click=${this.close} aria-hidden="true"></div>
         <div class="topbar" part="topbar">
           <div class="topbar-sponsor ${this.logoSquare ? "is-square" : ""}" part="sponsor">${this.renderTopbarSponsor()}</div>
-          <button class="close" part="close" @click=${this.close} aria-label="Lukk">×</button>
+          <button class="close" part="close" data-vio-cta="close" @click=${this.close} aria-label="Lukk">×</button>
         </div>
 
         ${this.renderBody()}
@@ -4482,6 +4622,7 @@ var VioProductDetail = class extends LitElement {
                           class="gallery-thumb ${idx === this.activeImageIndex ? "active" : ""}"
                           part=${idx === this.activeImageIndex ? "thumb thumb-active" : "thumb"}
                           @click=${() => this.activeImageIndex = idx}
+                          data-vio-cta=${idx === this.activeImageIndex ? nothing : "gallery_swipe"}
                           aria-label=${`Bilde ${idx + 1}`}
                           aria-current=${idx === this.activeImageIndex ? "true" : "false"}
                         >
@@ -4620,12 +4761,14 @@ var VioProductDetail = class extends LitElement {
                     stretched="true"
                     role="button"
                     aria-label="Kjøp nå med Vipps"
+                    data-vio-cta="vipps"
                     @click=${this.buyWithVipps}
                   ></vipps-mobilepay-button>
                 ` : html`
                   <button
                     class="buy-vipps"
                     part="buy-vipps"
+                    data-vio-cta="vipps"
                     @click=${this.buyWithVipps}
                     ?disabled=${this.adding}
                     aria-label="Kjøp nå med Vipps"
@@ -4640,6 +4783,7 @@ var VioProductDetail = class extends LitElement {
             <div class="qty-stepper">
               <button
                 class="qty-btn"
+                data-vio-cta="quantity_minus"
                 @click=${() => this.quantity = Math.max(1, this.quantity - 1)}
                 aria-label="Reduser antall"
               >
@@ -4648,6 +4792,7 @@ var VioProductDetail = class extends LitElement {
               <span class="qty-value">${this.quantity}</span>
               <button
                 class="qty-btn"
+                data-vio-cta="quantity_plus"
                 @click=${() => this.quantity = Math.min(this.availableQuantity, this.quantity + 1)}
                 aria-label="Øk antall"
                 ?disabled=${this.quantity >= this.availableQuantity}
@@ -4658,6 +4803,7 @@ var VioProductDetail = class extends LitElement {
             <button
               class="add-to-cart"
               part="add-to-cart"
+              data-vio-cta="add_to_cart"
               @click=${this.addToCart}
               ?disabled=${this.availableQuantity <= 0 || this.adding}
             >
@@ -4668,6 +4814,7 @@ var VioProductDetail = class extends LitElement {
           ${this.availableQuantity > 0 && this.methodEnabled(...NO_EXPRESS_BUTTON_METHODS) ? html`
                 <button
                   class="buy-now"
+                  data-vio-cta="buy_now"
                   @click=${this.buyNow}
                   ?disabled=${this.adding}
                   aria-label="Kjøp nå"
@@ -4679,6 +4826,7 @@ var VioProductDetail = class extends LitElement {
           ${this.availableQuantity > 0 && this.hasPrice && this.applePayOk && this.methodEnabled("apple-pay", "applepay") ? html`
                 <button
                   class="buy-applepay"
+                  data-vio-cta="apple_pay"
                   @click=${this.buyWithApplePay}
                   ?disabled=${this.adding}
                   aria-label="Kjøp nå med Apple Pay"
@@ -4691,6 +4839,7 @@ var VioProductDetail = class extends LitElement {
           ${this.availableQuantity > 0 && this.methodEnabled("stripe") ? html`
                 <button
                   class="buy-stripe"
+                  data-vio-cta="stripe"
                   @click=${this.buyWithStripe}
                   ?disabled=${this.adding}
                   aria-label="Kjøp nå med Stripe"
@@ -4707,6 +4856,8 @@ var VioProductDetail = class extends LitElement {
           ${this.availableQuantity > 0 && this.methodEnabled("klarna") ? html`
                 <button
                   class="buy-klarna"
+                  data-vio-cta="klarna"
+                  data-vio-cta-label="Kjøp nå med Klarna"
                   @click=${this.buyWithKlarna}
                   ?disabled=${this.adding}
                 >
@@ -4749,6 +4900,8 @@ var VioProductDetail = class extends LitElement {
                 <button
                   class="option-pill ${available ? "" : "unavailable"}"
                   part=${isSelected ? "option option-selected" : "option"}
+                  data-vio-cta="size"
+                  data-vio-cta-option=${val}
                   @click=${() => this.selectOption(opt.name, val)}
                   aria-pressed=${isSelected}
                   ?disabled=${!available}
@@ -5005,6 +5158,35 @@ var VioCart = class extends LitElement {
         void this.loadAvailablePaymentMethods();
       }
     };
+    /** Stops reporting the taps on the buttons (`vio:cta-click`). */
+    this.stopCtaClicks = null;
+    /**
+     * What a tap on a button of the cart says (`vio:cta-click`): a line's
+     * buttons name its product, variant and sponsor, and where its most recent
+     * units came from (campaign, slot, article); the footer's buttons name the
+     * sponsor they pay (Vipps: the one it pays; the others: the first).
+     */
+    this.ctaContext = (_cta, button) => {
+      const lineId = button?.getAttribute("data-vio-cta-line");
+      if (lineId) {
+        for (const cart of this.carts.values()) {
+          const item = cart.items.find((i) => i.id === lineId);
+          if (!item) continue;
+          const origin = [...lineOrigins(item)].reverse().find((o) => o.campaignId !== void 0 || o.slot || o.contentId);
+          return {
+            productId: item.productId,
+            productVariantId: item.variantId,
+            sponsorId: item.sponsorId,
+            campaignId: origin?.campaignId,
+            slot: origin?.slot,
+            contentId: origin?.contentId
+          };
+        }
+        return {};
+      }
+      const sponsorId = _cta === "vipps" ? this.vippsSponsorId() : [...this.carts.keys()][0];
+      return { sponsorId };
+    };
   }
   static {
     this.styles = [
@@ -5401,8 +5583,12 @@ var VioCart = class extends LitElement {
     this.itemCount = Vio.cart.itemCount;
     Vio.cart.addEventListener("change", this.boundOnCartChange);
     void this.loadAvailablePaymentMethods();
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = trackCtaClicks(this, "cart", this.ctaContext);
   }
   disconnectedCallback() {
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = null;
     Vio.cart.removeEventListener("change", this.boundOnCartChange);
     this.bottomSheet.disconnect();
     super.disconnectedCallback();
@@ -5717,12 +5903,12 @@ var VioCart = class extends LitElement {
     const isEmpty = this.itemCount === 0;
     const sponsorCarts = [...this.carts.values()].filter((c) => c.items.length > 0);
     return html`
-      <div class="backdrop" @click=${this.close}></div>
+      <div class="backdrop" data-vio-cta="close" data-vio-cta-label="" @click=${this.close}></div>
       <aside class="drawer" role="dialog" aria-modal="true" aria-label=${this.heading} tabindex="-1">
-        <div class="handle" @click=${this.close} aria-hidden="true"></div>
+        <div class="handle" data-vio-cta="close" data-vio-cta-label="" @click=${this.close} aria-hidden="true"></div>
         <div class="header">
           <h2 class="heading">${this.confirmedOrder ? "Takk!" : this.heading}</h2>
-          <button class="close" @click=${this.close} aria-label="Lukk">×</button>
+          <button class="close" data-vio-cta="close" @click=${this.close} aria-label="Lukk">×</button>
         </div>
 
         ${this.confirmedOrder ? this.renderConfirmation() : isEmpty ? html`<div class="empty">${this.emptyLabel}</div>` : html`
@@ -5744,6 +5930,8 @@ var VioCart = class extends LitElement {
                                 <span class="item-qty">
                                   <button
                                     class="qty-btn"
+                                    data-vio-cta="quantity_minus"
+                                    data-vio-cta-line=${item.id}
                                     @click=${() => this.onDecrement(item)}
                                     aria-label="Reduser"
                                   >
@@ -5752,6 +5940,8 @@ var VioCart = class extends LitElement {
                                   ${item.quantity}
                                   <button
                                     class="qty-btn"
+                                    data-vio-cta="quantity_plus"
+                                    data-vio-cta-line=${item.id}
                                     @click=${() => this.onIncrement(item)}
                                     aria-label="Øk"
                                   >
@@ -5759,6 +5949,8 @@ var VioCart = class extends LitElement {
                                   </button>
                                   <button
                                     class="qty-btn"
+                                    data-vio-cta="remove"
+                                    data-vio-cta-line=${item.id}
                                     @click=${() => this.onRemove(item)}
                                     aria-label="Fjern"
                                     style="margin-left: 8px;"
@@ -5791,6 +5983,7 @@ var VioCart = class extends LitElement {
                 ${this.renderShippingRows()}
                 <button
                   class="checkout-btn"
+                  data-vio-cta="checkout"
                   @click=${this.onCheckout}
                   ?disabled=${!this.payable}
                   aria-label="Til kassen"
@@ -5801,6 +5994,7 @@ var VioCart = class extends LitElement {
                 ${this.methodEnabled("apple-pay") && this.applePayAvailable ? html`
                       <button
                         class="applepay-btn"
+                        data-vio-cta="apple_pay"
                         @click=${this.onApplePay}
                         aria-label="Betal med Apple Pay"
                       >
@@ -5811,6 +6005,7 @@ var VioCart = class extends LitElement {
                 ${this.methodEnabled("stripe") ? html`
                       <button
                         class="stripe-btn"
+                        data-vio-cta="stripe"
                         @click=${this.onStripe}
                         aria-label="Betal med Stripe"
                       >
@@ -5820,6 +6015,7 @@ var VioCart = class extends LitElement {
                 ${this.methodEnabled("klarna") ? html`
                       <button
                         class="klarna-btn"
+                        data-vio-cta="klarna"
                         @click=${this.onKlarnaExpress}
                         aria-label="Betal med Klarna"
                       >
@@ -5842,11 +6038,13 @@ var VioCart = class extends LitElement {
                           stretched="true"
                           role="button"
                           aria-label="Betal med Vipps"
+                          data-vio-cta="vipps"
                           @click=${this.onVipps}
                         ></vipps-mobilepay-button>
                       ` : html`
                         <button
                           class="vipps-btn"
+                          data-vio-cta="vipps"
                           @click=${this.onVipps}
                           aria-label="Betal med Vipps"
                         >
@@ -5910,7 +6108,7 @@ var VioCart = class extends LitElement {
             <span>${formatPrice(o.total, o.currency)}</span>
           </div>
         </div>
-        <button class="confirm-close" @click=${this.closeConfirmation}>Lukk</button>
+        <button class="confirm-close" data-vio-cta="close" @click=${this.closeConfirmation}>Lukk</button>
       </div>
     `;
   }
@@ -6205,6 +6403,12 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       this.paymentError = detail.method === "klarna" ? `Klarna-betalingen kunne ikke fullf\xF8res: ${detail.error}` : friendlyPaymentError(detail.error, detail.method);
       this.open = true;
     };
+    /** Stops reporting the taps on the buttons (`vio:cta-click`). */
+    this.stopCtaClicks = null;
+    /** What a tap on a button of the checkout says (`vio:cta-click`): the sponsor whose cart it pays. */
+    this.ctaContext = () => ({
+      sponsorId: this.checkoutState?.sponsorId ?? this.orderSponsor?.sponsorId
+    });
     /** Payment events still waiting for their buyer reference: settled early (without it) when the page hides or the element leaves. */
     this.pendingSuccessEmits = /* @__PURE__ */ new Set();
   }
@@ -6836,6 +7040,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     void Vio.checkout.resumeKlarnaReturn();
     void this.checkReturnPaymentStatus();
     this.requestUpdate();
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = trackCtaClicks(this, "checkout", this.ctaContext);
   }
   static {
     /**
@@ -7288,6 +7494,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     }
   }
   disconnectedCallback() {
+    this.stopCtaClicks?.();
+    this.stopCtaClicks = null;
     Vio.checkout.removeEventListener("change", this.boundOnCheckoutChange);
     Vio.checkout.removeEventListener("payment-complete", this.boundOnPaymentComplete);
     Vio.checkout.removeEventListener("payment-error", this.boundOnPaymentError);
@@ -8108,7 +8316,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
   }
   render() {
     return html`
-      <div class="backdrop" @click=${this.close}></div>
+      <div class="backdrop" data-vio-cta="close" data-vio-cta-label="" @click=${this.close}></div>
       <div
         class="modal ${this.express ? "as-side" : this.orderConfirmed ? "as-confirm" : ""}"
         role="dialog"
@@ -8116,13 +8324,13 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         aria-label=${this.heading}
         tabindex="-1"
       >
-        <div class="handle" @click=${this.close} aria-hidden="true"></div>
+        <div class="handle" data-vio-cta="close" data-vio-cta-label="" @click=${this.close} aria-hidden="true"></div>
         <div class="topbar">
           <div class="topbar-title">
             <h2 class="heading">${this.orderConfirmed ? "Takk!" : this.heading}</h2>
             ${this.renderTopbarSponsor()}
           </div>
-          <button class="close" @click=${this.close} aria-label="Lukk">×</button>
+          <button class="close" data-vio-cta="close" @click=${this.close} aria-label="Lukk">×</button>
         </div>
 
         <div class="body">
@@ -8219,7 +8427,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     return html`
       <section class="section provider-receipt">
         <slot name=${slot}></slot>
-        <button class="confirm-close" @click=${this.close}>Lukk</button>
+        <button class="confirm-close" data-vio-cta="close" @click=${this.close}>Lukk</button>
       </section>
     `;
   }
@@ -8315,7 +8523,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                 </div>
               </div>
             ` : ""}
-        <button class="confirm-close" @click=${this.close}>Fortsett å handle</button>
+        <button class="confirm-close" data-vio-cta="close" @click=${this.close}>Fortsett å handle</button>
       </section>
     `;
   }
@@ -8901,6 +9109,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                 class="payment-btn primary complete-cta"
                 ?disabled=${!ready}
                 title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
+                data-vio-cta="pay_adyen"
                 @click=${() => {
       this.adyenRequested = true;
     }}
@@ -9071,6 +9280,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                 class="payment-btn primary complete-cta"
                 ?disabled=${!ready}
                 title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
+                data-vio-cta="pay_stripe"
                 @click=${() => {
       this.stripeRequested = true;
     }}
@@ -9083,6 +9293,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
               <button
                 class="payment-btn primary complete-cta"
                 ?disabled=${this.stripePaying || !this.stripeReady}
+                data-vio-cta="pay_stripe_confirm"
                 @click=${() => void this.onStripePay()}
               >
                 ${this.stripePaying ? "Betaler\u2026" : `Betal ${this.payTotalLabel()}`}
@@ -9149,6 +9360,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
         <div class="klarna-widget" id="vio-klarna-payments-container"></div>
         <button
           class="payment-btn primary complete-cta"
+          data-vio-cta="pay_klarna"
           @click=${() => void this.onKlarnaAuthorize()}
           ?disabled=${this.klarnaAuthorizing || !this.klarnaHandle || this.klarnaMounting || !this.express && (!this.isAddressValid || !this.hasSelectedShipping)}
         >
@@ -9365,6 +9577,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                   ${method === "stripe" && this.stripeMode !== "native" ? html`
                         <button
                           class="payment-btn primary complete-cta"
+                          data-vio-cta="pay_stripe"
                           @click=${() => void this.onPay("stripe")}
                           ?disabled=${this.stripeLoading || !this.cartPayable || !this.isAddressValid || !this.hasSelectedShipping}
                           title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
@@ -9375,6 +9588,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                   ${method === "vipps" ? html`
                         <button
                           class="payment-btn primary complete-cta"
+                          data-vio-cta="pay_vipps"
                           @click=${() => void this.onPay("vipps")}
                           ?disabled=${this.vippsLoading || !this.cartPayable || !this.isAddressValid || !this.hasSelectedShipping}
                           title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
@@ -9385,6 +9599,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                   ${method === "apple-pay" ? html`
                         <button
                           class="payment-btn primary complete-cta"
+                          data-vio-cta="pay_apple_pay"
                           @click=${() => void this.onPay("apple-pay")}
                           ?disabled=${this.applePayInProgress || !this.cartPayable || !this.isAddressValid || !this.hasSelectedShipping}
                           title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
@@ -9395,6 +9610,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                   ${showCompleteCta && method !== "stripe" && method !== "vipps" ? html`
                         <button
                           class="payment-btn primary complete-cta"
+                          data-vio-cta=${`pay_${ctaMethod(method)}`}
                           @click=${this.onCompleteOrder}
                           ?disabled=${!this.cartPayable || !this.isAddressValid || !this.hasSelectedShipping}
                           title=${!this.isAddressValid ? "Vennligst fyll ut leveringsadresse" : !this.hasSelectedShipping ? "Vennligst velg en fraktmetode" : ""}
@@ -9423,6 +9639,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                     ${this.methodEnabled("apple-pay") && this.applePayAvailable && !this.stripeOwnsWallets() ? html`
                           <button
                             class="payment-btn primary"
+                            data-vio-cta="select_apple_pay"
+                            data-vio-cta-label="Apple Pay"
                             @click=${() => this.onPay("apple-pay")}
                             ?disabled=${this.applePayInProgress}
                           >
@@ -9432,6 +9650,8 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                     ${this.methodEnabled("stripe") ? html`
                           <button
                             class="payment-btn"
+                            data-vio-cta="select_stripe"
+                            data-vio-cta-label="Stripe"
                             @click=${() => this.onPay("stripe")}
                             ?disabled=${this.stripeLoading}
                           >
@@ -9439,37 +9659,37 @@ var _VioCheckout = class _VioCheckout extends LitElement {
                           </button>
                         ` : ""}
                     ${this.methodEnabled("klarna") && this.klarnaAvailable ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("klarna")}>
+                          <button class="payment-btn" data-vio-cta="select_klarna" data-vio-cta-label="Klarna" @click=${() => this.onPay("klarna")}>
                             Klarna
                           </button>
                         ` : ""}
                     ${this.methodEnabled("kustom") ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("kustom")}>
+                          <button class="payment-btn" data-vio-cta="select_kustom" data-vio-cta-label="Kustom" @click=${() => this.onPay("kustom")}>
                             <span style="font-weight:800;font-size:16px;letter-spacing:-0.01em">Kustom</span>
                           </button>
                         ` : ""}
                     ${this.methodEnabled("qliro") ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("qliro")}>
+                          <button class="payment-btn" data-vio-cta="select_qliro" data-vio-cta-label="Qliro" @click=${() => this.onPay("qliro")}>
                             <span style="font-weight:800;font-size:16px;letter-spacing:-0.01em">Qliro</span>
                           </button>
                         ` : ""}
                     ${this.methodEnabled("walley") ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("walley")}>
+                          <button class="payment-btn" data-vio-cta="select_walley" data-vio-cta-label="Walley" @click=${() => this.onPay("walley")}>
                             <span style="font-weight:800;font-size:16px;letter-spacing:-0.01em">Walley</span>
                           </button>
                         ` : ""}
                     ${this.methodEnabled("nexi") ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("nexi")}>
+                          <button class="payment-btn" data-vio-cta="select_nexi" data-vio-cta-label="Nexi" @click=${() => this.onPay("nexi")}>
                             <span style="font-weight:800;font-size:16px;letter-spacing:-0.01em">Nexi</span>
                           </button>
                         ` : ""}
                     ${this.methodEnabled("adyen") ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("adyen")}>
+                          <button class="payment-btn" data-vio-cta="select_adyen" @click=${() => this.onPay("adyen")}>
                             <span style="font-weight:700;font-size:15px;letter-spacing:-0.01em">${this.methodLabel("adyen")}</span>
                           </button>
                         ` : ""}
                     ${this.methodEnabled("vipps") ? html`
-                          <button class="payment-btn" @click=${() => this.onPay("vipps")} aria-label="Vipps">
+                          <button class="payment-btn" data-vio-cta="select_vipps" @click=${() => this.onPay("vipps")} aria-label="Vipps">
                             ${this.vippsOfficial ? html`<vipps-mobilepay-button
                                   brand="vipps"
                                   variant="primary"
@@ -9687,6 +9907,9 @@ __decorateClass([
   state()
 ], _VioCheckout.prototype, "shippingsReadyFor", 2);
 var VioCheckout = _VioCheckout;
+function ctaMethod(method) {
+  return String(method ?? "unknown").toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "") || "unknown";
+}
 
 // src/ui/elements.ts
 function registerVioElements() {
@@ -9705,5 +9928,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-DEREQRCM.js.map
-//# sourceMappingURL=chunk-DEREQRCM.js.map
+//# sourceMappingURL=chunk-LDA7RI43.js.map
+//# sourceMappingURL=chunk-LDA7RI43.js.map