NB11 GTM Handover

/**
 * Nanobag NB11 - Featured Products Sheet feed (live-test only).
 * Replace everything in Code.gs with this file.
 * The theme sends one POST per card impression or click: JSON in the body, sent as plain text.
 */

// Leave empty if this script is attached to the Sheet (Sheet > Extensions > Apps Script).
// If it is a standalone script, paste the Sheet ID from the Sheet's URL here.
const SHEET_ID = '';
const SHEET_NAME = 'events';
const HEADERS = ['received_at', 'event_name', 'product_handle', 'variant_id', 'variant_title',
                 'position', 'arm', 'country', 'currency', 'page'];
const ALLOWED = ['featured_collection_impression', 'featured_collection_click'];

function doPost(e) {
  const lock = LockService.getScriptLock();
  try {
    const d = JSON.parse(e.postData.contents);
    // The URL is public: anything that isn't one of our two events is dropped
    if (ALLOWED.indexOf(d.event_name) === -1 || !/^\d+$/.test(String(d.variant_id))) {
      return ContentService.createTextOutput('ignored');
    }
    // Requests arrive at the same moment; without the lock rows get lost
    lock.waitLock(10000);
    getSheet_().appendRow([
      new Date(), d.event_name, cell_(d.product_handle), cell_(d.variant_id), cell_(d.variant_title),
      Number(d.position) || '', cell_(d.arm), cell_(d.country), cell_(d.currency), cell_(d.page)
    ]);
    return ContentService.createTextOutput('ok');
  } catch (err) {
    console.error(err); // the browser never sees failures: check Executions in Apps Script
    return ContentService.createTextOutput('error');
  } finally {
    lock.releaseLock();
  }
}

// Opening the /exec URL in a browser shows this line: a quick check that the deployment is live.
function doGet() {
  return ContentService.createTextOutput('NB11 sheet feed running');
}

// The "events" tab, created with its header row the first time if it doesn't exist.
function getSheet_() {
  const book = SHEET_ID ? SpreadsheetApp.openById(SHEET_ID) : SpreadsheetApp.getActiveSpreadsheet();
  let sheet = book.getSheetByName(SHEET_NAME);
  if (!sheet) {
    sheet = book.insertSheet(SHEET_NAME);
    sheet.appendRow(HEADERS);
    sheet.setFrozenRows(1);
  }
  return sheet;
}

// Cut long values, and stop a leading = + - @ from being read as a Sheets formula.
function cell_(v) {
  return String(v == null ? '' : v).slice(0, 200).replace(/^[=+\-@]/, "'$&");
}

    {%- comment -%} NB11 events go to window.dataLayer for the theme's GTM (WNJCZ75Z) only.
    Not published as Shopify custom events: the Customer Events pixel container stays clean. {%- endcomment -%}
    <script>
      window.nbTrack = function (payload) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push(payload);
      };
    </script>

    {%- comment -%} NB11 test arm - the ONE place the arm is decided. Rollouts tells the
    storefront nothing, so the arm is read off what rendered: only the treatment has the
    Featured Products section on the homepage ([data-nb11-fp]) and the v4 switcher on the
    flagship PDP (.nb-switcher-v4). Only those two pages decide - every other page (gift
    product, collections, cart) keeps the stored value, so browsing never relabels a
    shopper. Runs here, after content_for_layout, because the homepage check needs the
    whole page parsed. EU and other out-of-test markets render neither and read A:
    filter them out by country, as in NB10. Next test: bump KEY and the NB11 prefix so a
    stored arm can never leak into it. window.nbArm is what every nb_* event and the cart
    stamp below send; the bare theme id means "arm unknown". {%- endcomment -%}
    <script>
      (function () {
        var KEY = 'nb-arm-v3';
        var arm = '{{ theme.id }}';
        try { arm = localStorage.getItem(KEY) || arm; } catch (e) {}
        {%- unless request.design_mode %}
        var payload = null;
        {%- if template.name == 'index' %}
        arm = document.querySelector('[data-nb11-fp]') ? 'NB11-B' : 'NB11-A';
        payload = { event: 'nb_arm_view', nb_page: 'home' };
        {%- elsif template.name == 'product' and template.suffix == blank %}
        var picker = document.querySelector('.custom-prod-design-section variant-picker');
        if (picker) {
          arm = picker.classList.contains('nb-switcher-v4') ? 'NB11-B' : 'NB11-A';
          payload = { event: 'nb_arm_view', nb_page: 'pdp', nb_product: {{ product.handle | json }}, nb_variant: '{{ product.selected_or_first_available_variant.id }}' };
          // Opened from a Featured Products card: its link carries nb_fp=<position>. Taken out
          // of the address bar once read, so a reload, bookmark or shared link isn't counted again.
          try {
            var url = new URL(location.href);
            var fpPos = url.searchParams.get('nb_fp');
            if (fpPos) {
              payload.nb_source = 'fp_card';
              payload.nb_position = Number(fpPos);
              url.searchParams.delete('nb_fp');
              history.replaceState(history.state, '', url.pathname + url.search + url.hash);
            }
          } catch (e) {}
        }
        {%- endif %}
        if (payload) {
          try { localStorage.setItem(KEY, arm); } catch (e) {}
          payload.nb_arm = arm;
          window.nbTrack(payload);
        }
        {%- endunless %}
        // Clarity custom tag so recordings and heatmaps filter by arm (queue stub = Clarity's own loader shape)
        window.clarity = window.clarity || function () { (window.clarity.q = window.clarity.q || []).push(arguments); };
        function apply(v) {
          window.nbArm = v;
          window.clarity('set', 'nb_arm', v);
        }
        apply(arm);
        // Back/forward cache restores this page without rerunning the script, so a collection
        // page opened before the arm was known would keep sending the old value - re-read it.
        window.addEventListener('pageshow', function (e) {
          if (!e.persisted) return;
          try { apply(localStorage.getItem(KEY) || window.nbArm); } catch (err) {}
        });
      })();
    </script>

{%- comment -%} NB11: renders nothing (no CSS, no JS, no arm marker) until "Show section" is
ticked. The rollout treatment ticks it per market; control leaves it off. {%- endcomment -%}
{%- if section.settings.nb11_show -%}
{{ 'section-featured-products-carousel.css' | asset_url | stylesheet_tag }}
<script src="{{ 'featured-products-carousel.js' | asset_url }}" defer="defer"></script>
{%- comment -%} NB11 arm marker: layout/theme.liquid labels a homepage visitor NB11-B when this
exists. Rendered whenever the section is enabled, even if no card resolves below, so an
empty row in some market can't flip a treatment visitor to A. {%- endcomment -%}
<span data-nb11-fp hidden></span>

<div class="card media-card featured-carousel__card">
  <a
    href="{{ card_url }}{% if product != blank %}{% if card_url contains '?' %}&amp;{% else %}?{% endif %}nb_fp={{ position }}{% endif %}"
    class="media-card__link flex flex-col w-full h-full relative"
    aria-label="{{ card_title | escape }}{% if colour_label != blank %}, {{ colour_label | escape }}{% endif %}"
    {%- if product != blank %}
      data-nb-fp-product="{{ product.handle | escape }}"
      data-nb-fp-variant="{{ variant.id }}"
      data-nb-fp-variant-title="{{ variant.title | escape }}"
      data-nb-fp-position="{{ position }}"
    {%- endif %}
  >

  // NB11 test: card clicks to GA through GTM. One listener for every carousel
  // on the page. Only the card links carry data-nb-fp-product, so arrows never
  // count, and a drag is never a click (the slider stops it before it gets
  // here). Nothing is prevented or awaited, so the product page opens as usual.
  // window.nbTrack (layout/theme.liquid) sends it to GTM.
  // The arrival is reported by the product page itself: the card link
  // carries nb_fp=<position> (featured-products-carousel-card.liquid).
  const cardFields = (link) => ({
    nb_product: link.dataset.nbFpProduct,
    nb_variant: link.dataset.nbFpVariant,
    nb_variant_title: link.dataset.nbFpVariantTitle || '',
    nb_position: Number(link.dataset.nbFpPosition),
    nb_arm: window.nbArm || '',
  });

  document.addEventListener('click', (event) => {
    const link = event.target.closest?.('a[data-nb-fp-product]');
    if (!link) return;
    window.nbTrack({ event: 'nb_fp_card_click', ...cardFields(link) });
  });

  // NB11 test: a card counts as seen (nb_fp_card_view) once per page, the first
  // time half of it is on screen. Only real cards are watched: the loop's copies
  // are added later and the scroller always settles back on the real card.
  // The ratio is checked because the observer's first report fires for every
  // card, with isIntersecting true for even a sliver.
  const seen = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.intersectionRatio < 0.5) return;
      seen.unobserve(entry.target);
      window.nbTrack({ event: 'nb_fp_card_view', ...cardFields(entry.target) });
    });
  }, { threshold: 0.5 });
  document.querySelectorAll('a[data-nb-fp-product]').forEach((link) => {
    if (!link.closest('[data-loop-clone]')) seen.observe(link);
  });

{%- comment -%}
  PDP behavioral events for the switcher A/B test. Rendered on BOTH arms with the same
  event names, so GA4 compares like-for-like. Sent through window.nbTrack (layout/theme.liquid):
  window.dataLayer for GTM-WNJCZ75Z. Every event carries nb_product, nb_variant (the variant selected at
  that moment) and nb_arm.

  Events:
    nb_variant_select  { nb_variant_title, nb_style, nb_color, nb_option, nb_switcher }
                       the selected variant changed (style tab or colour), after the page updated
    nb_style_select    { nb_product, nb_style }      a Style option was clicked (card or flat)
    nb_size_guide_open { nb_product }                a Size Guide trigger was clicked
    nb_specs_view      { nb_product }                the bag-specs strip became 50% visible (once per pageview)
    nb_atc_click       { nb_product, atc_location }  add-to-cart clicked ('main' or 'sticky')
    (nb_arm_view moved to layout/theme.liquid, which decides the NB11 arm for the whole site)

  @param {object} product - the PDP product (handle goes on every event)
  @param {boolean} tip_gate - IGNORED since the tip text went live in all 7 markets.
    Kept so the existing render call stays valid. The arm is no longer derived here.
{%- endcomment -%}
<script>
  (function () {
    if (window.__nbPdpAnalytics) return;
    window.__nbPdpAnalytics = true;

    var productHandle = {{ product.handle | json }};
    var currentVariant = '{{ product.selected_or_first_available_variant.id }}';

    // nb_arm comes from window.nbArm, set by the NB11 arm script in layout/theme.liquid.
    // It runs at the end of <body>, after this snippet, so read it when each event fires
    // (always a user action or an observer, i.e. later), never at load.
    function push(payload) {
      payload.nb_product = productHandle;
      payload.nb_variant = payload.nb_variant || currentVariant;
      payload.nb_arm = window.nbArm || '{{ theme.id }}';
      window.nbTrack(payload);
    }

    function switcherVersion() {
      var picker = document.querySelector('.custom-prod-design-section variant-picker');
      if (!picker) return '';
      if (picker.classList.contains('nb-switcher-v4')) return 'v4';
      if (picker.classList.contains('nb-switcher-v3')) return 'v3';
      return 'live';
    }

    // Variant changes - the theme dispatches variant:change (not bubbling) on the main
    // product form once the new variant is in place, so listen in the capture phase. Forms
    // outside the main product section (quick views) are ignored.
    document.addEventListener('variant:change', function (e) {
      var v = e.detail && e.detail.variant;
      if (!v || !v.id) return;
      var t = e.target;
      if (t && t.closest && !t.closest('.custom-prod-design-section')) return;
      currentVariant = String(v.id);
      push({
        event: 'nb_variant_select',
        nb_variant_title: v.title || '',
        nb_style: v.option1 || '',
        nb_color: v.option2 || '',
        nb_option: e.detail.optionChangedIsColor ? 'color' : 'style',
        nb_switcher: switcherVersion()
      });
    }, true);

    // Style selection - option1 is the Style group in both the card and the flat picker
    document.addEventListener('change', function (e) {
      var input = e.target;
      if (!input || input.type !== 'radio' || !input.closest) return;
      var fieldset = input.closest('fieldset[data-option-index="option1"]');
      if (!fieldset || !fieldset.closest('variant-picker')) return;
      push({ event: 'nb_style_select', nb_style: input.value || '' });
    });

    // Size Guide opens - bubble-phase listener; works because the popup no longer stops propagation
    document.addEventListener('click', function (e) {
      var t = e.target;
      if (t && t.closest && t.closest('[data-cn-sg-open]')) {
        push({ event: 'nb_size_guide_open' });
      }
    });

    // The variant the form is about to submit. pdp-variant-shim writes the new id into the
    // forms the moment a colour is picked, before variant:change, so a fast tap would
    // otherwise report the previous variant. FormData skips the disabled placeholder input.
    function submittedVariant(el) {
      try {
        var form = el.form || el.closest('form');
        var id = form && new FormData(form).get('id');
        if (id) return String(id);
      } catch (err) {}
      return currentVariant;
    }

    // Add-to-cart - sticky checked first so a sticky click never double-counts as main
    document.addEventListener('click', function (e) {
      var t = e.target;
      if (!t || !t.closest) return;
      var sticky = t.closest('.product-sticky-form__submit');
      if (sticky) {
        push({ event: 'nb_atc_click', atc_location: 'sticky', nb_variant: submittedVariant(sticky) });
        return;
      }
      var btn = t.closest('button[name="add"]');
      if (btn && btn.closest('form[data-type="add-to-cart-form"]')) {
        push({ event: 'nb_atc_click', atc_location: 'main', nb_variant: submittedVariant(btn) });
      }
    });

    // Specs strip viewed - fires once per pageview at 50% visibility; no-op on the control arm
    function observeSpecs() {
      var el = document.querySelector('.nb-bag-specs');
      if (!el || !('IntersectionObserver' in window)) return;
      var io = new IntersectionObserver(function (entries) {
        for (var i = 0; i < entries.length; i++) {
          if (entries[i].isIntersecting) {
            push({ event: 'nb_specs_view' });
            io.disconnect();
            return;
          }
        }
      }, { threshold: 0.5 });
      io.observe(el);
    }
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', observeSpecs);
    } else {
      observeSpecs();
    }
  })();
</script>

    {%- comment -%} A/B attribution, cart-level half: stamp the serving arm as a cart
    attribute so Flow can tag orders by test arm. Rollouts serve both arms from the same
    theme id, so the id alone can't tell A from B - this stamp sends window.nbArm from
    the NB11 arm script above (bare theme id until the visitor has seen the homepage or
    the flagship PDP = unattributed). data-cookieconsent="ignore" is required - Cookiebot's auto-blocking rewrites
    unmarked inline scripts to text/plain pre-consent, which would punch consent-shaped
    holes in the attribution (first-party, no PII - the line-item property in
    buy-buttons is the no-JS backstop). The sessionStorage guard keys on the stamped
    value, so the stamp upgrades itself once the arm becomes known; skipped while the
    cart is empty so bots and bounces never mint carts. {%- endcomment -%}
    <script data-cookieconsent="ignore">
      (function () {
        var KEY = 'nb-theme-stamped';
        var stamping = false;
        function armValue() {
          return window.nbArm || '{{ theme.id }}';
        }
        function deviceValue() {
          {%- comment -%} Bands mirror this theme's layout breakpoints (<768 mobile,
          768-991 tablet band, 992+ desktop) so the value means "which layout they saw",
          not what the hardware was - Shopify removed clientDetails from the Order API,
          the browser is the only witness left for per-device order forensics {%- endcomment -%}
          try {
            if (window.matchMedia('(min-width: 992px)').matches) return 'desktop';
            if (window.matchMedia('(min-width: 768px)').matches) return 'tablet';
            return 'mobile';
          } catch (e) { return 'unknown'; }
        }
        function stamp() {
          var val = armValue();
          var dev = deviceValue();
          var stamped = val + '|' + dev;
          try { if (sessionStorage.getItem(KEY) === stamped) return; } catch (e) {}
          if (stamping) return;
          stamping = true;
          fetch('/cart.js', { headers: { Accept: 'application/json' } })
            .then(function (r) { return r.json(); })
            .then(function (cart) {
              if (!cart.item_count) return;
              if (cart.attributes && cart.attributes._nb_theme === val && cart.attributes._nb_device === dev) {
                try { sessionStorage.setItem(KEY, stamped); } catch (e) {}
                return;
              }
              return fetch('/cart/update.js', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
                body: JSON.stringify({ attributes: { _nb_theme: val, _nb_device: dev } })
              }).then(function (r) {
                if (r.ok) { try { sessionStorage.setItem(KEY, stamped); } catch (e) {} }
              });
            })
            .catch(function () {})
            .then(function () { stamping = false; });
        }
        stamp();
        {%- comment -%} AJAX adds don't reload the page and the drawer checkouts straight
        from there - the theme fires cart:updated on every cart mutation {%- endcomment -%}
        document.addEventListener('cart:updated', stamp);
        document.addEventListener('ajaxProduct:added', stamp);
      })();
    </script>