Klaviyo personalization architecture: dwell-time JS + 6-path Django logic

// theme.liquid — runs on every product page (Liquid renders the {{ product.* }}
// values into the JS at server-side; the JS then runs in the customer's browser)
<script>
(function () {
  var product = {
    id:    {{ product.id }},
    name:  {{ product.title | json }},
    url:   {{ shop.url | append: product.url | json }},
    image: 'https:' + {{ product.featured_image | image_url: width: 600 | json }},
    price: {{ product.price | money_without_currency | json }}
  };

  var startedAt = Date.now();
  var fired = false;

  function elapsedSeconds() {
    return Math.round((Date.now() - startedAt) / 1000);
  }

  function recordDwell() {
    if (fired) return;
    var seconds = elapsedSeconds();
    if (seconds < 8) return;          // filters bots + accidental clicks
    fired = true;

    // 1. Fire the Klaviyo event for trigger purposes
    if (window._learnq) {
      window._learnq.push(['track', 'Product Dwell Time', {
        ProductName:        product.name,
        ProductID:          product.id,
        URL:                product.url,
        ImageURL:           product.image,
        Price:              product.price,
        Time_Spent_Seconds: seconds
      }]);
    }

    // 2. Track per-product highest dwell in this session
    var key = 'dwell_' + product.id;
    var prev = parseInt(sessionStorage.getItem(key) || '0', 10);
    if (seconds > prev) sessionStorage.setItem(key, String(seconds));

    // 3. Find the session's highest-dwell product across all visited products
    var top = { id: null, seconds: 0, name: null, url: null, image: null, price: null };
    for (var i = 0; i < sessionStorage.length; i++) {
      var k = sessionStorage.key(i);
      if (!k || k.indexOf('dwell_') !== 0) continue;
      var s = parseInt(sessionStorage.getItem(k) || '0', 10);
      if (s > top.seconds) {
        top.seconds = s;
        top.id = k.replace('dwell_', '');
      }
    }

    // For the current product (the only one we know full details for from this load),
    // mirror its data into the top-browsed shape if it won the session.
    if (String(product.id) === top.id) {
      top.name  = product.name;
      top.url   = product.url;
      top.image = product.image;
      top.price = product.price;
    }

    // 4. Push the session winner as PERSISTENT profile properties.
    // Profile properties survive across sessions; events do not.
    // By the time the 1-hour Browse Abandonment wait expires, the profile
    // reflects the most-engaged product, not whatever fired the trigger.
    if (window._learnq && top.name) {
      window._learnq.push(['identify', {
        Top_Browsed_Product: top.name,
        Top_Browsed_URL:     top.url,
        Top_Browsed_Image:   top.image,
        Top_Browsed_Price:   top.price
      }]);
    }
  }

  // Dual listeners: visibilitychange catches tab switches and most navigations
  // on mobile + desktop; beforeunload is the desktop backup for hard window
  // closes. Together they catch every "user left this page" event without
  // double-firing (the 'fired' guard handles the overlap).
  document.addEventListener('visibilitychange', function () {
    if (document.visibilityState === 'hidden') recordDwell();
  });
  window.addEventListener('beforeunload', recordDwell);
})();
</script>

{# Klaviyo flow email · Welcome + Upsell template
   Reads:
     - person|lookup:'Shopify Tags'  (synced from Shopify customer tags)
     - person|lookup:'Top_Browsed_Product'  (pushed by storefront JS)
   Order matters: Active Subscriber checked FIRST because subscribers
   also carry Has_Product_X + Has_Product_Y tags. #}

{% assign tags = person|lookup:'Shopify Tags'|default:'' %}
{% assign top_product = person|lookup:'Top_Browsed_Product'|default:event.Name %}
{% assign top_url     = person|lookup:'Top_Browsed_URL'|default:event.URL %}

{% if tags contains 'Active Subscriber' %}
  {# Path 1 — Active Subscriber. They have everything. Don't sell what they have. #}
  <h1>You're already in.</h1>
  <p>Here's what's dropping next month for subscribers.</p>
  <a href="/collections/upcoming">Browse the latest →</a>

{% elif tags contains 'Has_Product_X' and tags contains 'Has_Product_Y' %}
  {# Path 2 — Full system minus subscription. Only upsell left is subscription. #}
  <h1>You've got Product_X. You've got Product_Y. Now never run out.</h1>
  <a href="/products/subscription">Start a Subscription →</a>

{% elif tags contains 'Has_Product_X' %}
  {# Path 3 — Product_X only. Push Product_Y (don't push subscription yet — first try). #}
  <h1>Now make Product_X yours.</h1>
  <p>Pre-made designs, custom Product_Y units, or the monthly subscription drop.</p>
  <a href="/collections/product-y">Browse Product_Y →</a>

{% elif tags contains 'Has_Product_Y' %}
  {# Path 4 — Product_Y only. They MUST own Product_X (got it off-platform — at an
     event or on Amazon). Shopify just doesn't know. Push subscription, NOT
     a Product_X they already own. #}
  <h1>You already know the system. Never run out of new designs.</h1>
  <a href="/products/subscription">Start a Subscription →</a>

{% elif tags contains 'Has_Product_Z' %}
  {# Path 5 — Product_Z only, no Product_X. Product_X is the entry product. #}
  <h1>Get Product_X.</h1>
  <p>Step one before anything else.</p>
  <a href="/products/product-x">Shop Product_X →</a>

{% else %}
  {# Path 6 — No tags. Could be brand new or could own everything off-platform.
     Full system intro is the safest default. #}
  <h1>Here's how the system works.</h1>
  <p>Product_Z → Product_X → swappable Product_Y → monthly subscription drops.</p>
  <a href="/">Shop the system →</a>
{% endif %}

{# If they have a top-browsed product, surface it below the cross-sell as a
   secondary nudge. This block renders for every path. #}
{% if top_product %}
  <hr>
  <p>You were also looking at:</p>
  <a href="{{ top_url }}">{{ top_product }} →</a>
{% endif %}

// Shopify Flow workflow definition · "Has_Product_X customer tagging"
// Trigger:    shopify/orders/create  (fires on every Order Created event)
// Action:     Add customer tag
// Filter:     line item product tag contains "Product_X"
//
// Equivalent JSON shape (Shopify Flow stores workflows as a graph):
{
  "version": "2024-01",
  "trigger": {
    "type": "shopify/orders/create"
  },
  "steps": [
    {
      "id": "filter_has_product_x_line_item",
      "type": "condition",
      "expression":
        "order.lineItems.any(li => li.product.tags.contains('Product_X'))"
    },
    {
      "id": "add_customer_tag",
      "type": "action",
      "action": "shopify/customers/add_tags",
      "input": {
        "customerId": "{{ order.customer.id }}",
        "tags": ["Has_Product_X"]
      },
      "runIf": "filter_has_product_x_line_item == true"
    }
  ]
}

// Two more workflows mirror this shape:
//   - Has_Product_Y: filters on line item product tag "Product_Y"
//   - Has_Product_Z: filters on line item product tag "Product_Z" (pending the
//     tag-taxonomy fix; Product_Z needs its product tag added first)
//
// Anti-foot-gun note: Product_W units were originally tagged "Product_X" by mistake.
// Without catching that, anyone who bought Product_W would have been tagged
// Has_Product_X and received "you already own Product_X, get Product_Y" emails.
// Caught by reading products.json via the Shopify Admin REST API
// (v2024-01) and verifying the tag taxonomy before activating the workflow.
//
// Backfill path (Shopify Flow only tags future orders):
//   Customers → Segments → filter by products_purchased(tag: 'Product_X')
//   → bulk-tag Has_Product_X → repeat for Product_Y.