Northbeam DashboardQuestions? Reach out to our team!
Technical Guides

Shopify Installation

Add the Northbeam pixel to your Shopify storefront

Below, you'll find instructions for adding the Northbeam pixel to various parts of your site. Please follow the instructions that apply to your Shopify configuration.

Northbeam Pixel

Please install this script in the head section of every page in your website. Be sure to replace {DATA_CLIENT_ID} with your unique Northbeam Data Client ID, which you can find here. 

<script>(function(){var r;(e=r=r||{}).A="identify",e.B="trackPageView",e.C="fireEmailCaptureEvent",e.D="fireCustomGoal",e.E="firePurchaseEvent",e.F="firePurchaseSyncEvent";var e="//j.northbeam.io/ota-sp/{DATA_CLIENT_ID}.js";function t(e){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];a.push({fnName:e,args:n})}var a=[],n=((n={_q:a})[r.A]=function(e,n){return t(r.A,e,n)},n[r.B]=function(){return t(r.B)},n[r.C]=function(e,n){return t(r.C,e,n)},n[r.D]=function(e,n){return t(r.D,e,n)},n[r.E]=function(e){return t(r.E,e)},n[r.F]=function(e){return t(r.F,e)},window.Northbeam=n,document.createElement("script"));n.async=!0,n.src=e,document.head.appendChild(n);})()</script>

If you use Google Tag Manager, please follow the instructions for deploying this pixel using GTM here.

Shopify Order Status Page (Legacy)

If you use Shopify and are on Shopify's Classic Checkout (Not Checkout Extensibility), please follow the instructions below to add the order status pixel.

  1. From the Shopify Admin panel,
    1. Click Settings
    2. Click Checkout
    3. Scroll down and find Order Status Page
  2. In the Additional Scripts field,
    1. In the script below, replace {DATA_CLIENT_ID} with your unique Northbeam Data Client ID, which you can find here.
    2. Copy and paste the script (below). If there is any other code in this field, please add it to the top or bottom.
    3. Click Save to commit the change.

📘

If you don't have a theme.liquid file, get in touch with us and we can help you figure out where to install the Northbeam Pixel.

<!-- Begin: Northbeam Shopify order status pixel -->
<script>(function(){var r;(e=r=r||{}).A="identify",e.B="trackPageView",e.C="fireEmailCaptureEvent",e.D="fireCustomGoal",e.E="firePurchaseEvent",e.F="firePurchaseSyncEvent";var e="//j.northbeam.io/ota-sp/{DATA_CLIENT_ID}.js";function t(e){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];a.push({fnName:e,args:n})}var a=[],n=((n={_q:a})[r.A]=function(e,n){return t(r.A,e,n)},n[r.B]=function(){return t(r.B)},n[r.C]=function(e,n){return t(r.C,e,n)},n[r.D]=function(e,n){return t(r.D,e,n)},n[r.E]=function(e){return t(r.E,e)},n[r.F]=function(e){return t(r.F,e)},window.Northbeam=n,document.createElement("script"));n.async=!0,n.src=e,document.head.appendChild(n);})()</script>
{% capture coupons %}{% for discount in discount_applications %}{{ discount.title }}{% unless forloop.last %}, {% endunless %}{% endfor %}{% endcapture %}
<script>
  (function() {
    var snowplow = window._nbq = window._nbq || function () {
      window._nbq.q = window._nbq.q || [];
      window._nbq.q.push(arguments);
    };
    window._nbq.q = window._nbq.q || [];

    {% unless first_time_accessed %}return;{% endunless %}

    fireVersionEvent();
    fireConversionEvent();

    function fireVersionEvent() {
      snowplow(
        "trackStructEvent:nb",
        "__nb_internal",
        "shopify-conversion-tag-version",
        "{{ order.order_number }}-{{id}}",
        "f60d960168824c5bcd81843a1492826797bb8701");
    }

    function fireConversionEvent() {
      {% for line_item in line_items %}
        var sku = {
          product: "{{ line_item.product_id }}",
          variant: "{{ line_item.variant_id }}",
        };

        snowplow(
          "addEnhancedEcommerceProductContext:nb",
          JSON.stringify(sku, Object.keys(sku).sort()),
          "{{ line_item.product.title | escape }}",
          "",
          "{{ line_item.vendor | escape }}",
          "",
          "{{ line_item.variant.title | escape }}",
          {% if line_item.original_price != 0 %}
            "{{ line_item.original_price | divided_by: 100.00 }}"
          {% else %}
            "{{ line_item.price | divided_by: 100.00 }}"
          {% endif %},
          "{{ line_item.quantity }}",
          "",
          null,
          "{{ currency }}"
        );
      {% endfor %}

      snowplow(
        "addEnhancedEcommerceActionContext:nb",
        "{{ id }}",
        "__nb_shopify.checkout_id",
        "{{ total_price | divided_by: 100.00 }}",
        "{{ tax_price | divided_by: 100.00 }}",
        "{{ shipping_price | divided_by: 100.00 }}",
        "{{ coupons | escape }}",
        "",
        null,
        "",
        "{{ currency }}",
      );

      snowplow("trackEnhancedEcommerceAction:nb", "purchase");
    }
  })();
</script>
<!-- End: Northbeam Shopify order status pixel -->

Shopify Checkout Extensibility

If you use Shopify and are on Shopify's Checkout Extensibility Flow, please follow the instructions below to add Northbeam scripts to Shopify's Customer events. Be sure to replace {DATA_CLIENT_ID} with your unique Northbeam Data Client ID, which you can find here.

In order for us to help support Shopify's Checkout Extensibility, it is required that you add in this Custom Pixel Script in the "Customer Events" setting within Shopify.

📘

Note

It is important to remember to still add in the Northbeam Pixel onto your Shopify either through your theme.liquid file or via Google Tag Manager.

Reference these video instructions as a guide to adding your pixel script in:

 // Begin: Northbeam Events
 // Begin: Northbeam Pixel
 (function() {
     var r;
     (e = r = r || {}).A = "identify", e.B = "trackPageView", e.C = "fireEmailCaptureEvent", e.D = "fireCustomGoal", e.E = "firePurchaseEvent", e.F = "firePurchaseSyncEvent";
     var e = "//j.northbeam.io/ota-sp/{DATA_CLIENT_ID}.js";

     function t(e) {
         for (var n = [], r = 1; r < arguments.length; r++) n[r - 1] = arguments[r];
         a.push({
             fnName: e,
             args: n
         })
     }
     var a = [],
         n = ((n = {
             _q: a
         })[r.A] = function(e, n) {
             return t(r.A, e, n)
         }, n[r.B] = function() {
             return t(r.B)
         }, n[r.C] = function(e, n) {
             return t(r.C, e, n)
         }, n[r.D] = function(e, n) {
             return t(r.D, e, n)
         }, n[r.E] = function(e) {
             return t(r.E, e)
         }, n[r.F] = function(e) {
             return t(r.F, e)
         }, window.Northbeam = n, document.createElement("script"));
     n.async = !0, n.src = e, document.head.appendChild(n);
 })()
 // End: Northbeam Pixel

 // Subscription Hook
 analytics.subscribe("checkout_completed", (event) => {
     window.Northbeam.firePurchaseEvent({
         id: event.data.checkout.token,
         totalPrice: event.data.checkout.totalPrice.amount,
         shippingPrice: event.data.checkout.shippingLine.price.amount || 0,
         taxPrice: event.data.checkout.totalTax.amount || 0,
         coupons: event.data.checkout.discountApplications.join(','),
         currency: event.data.checkout.currencyCode,
         customerId: event.data.checkout.order.customer.id,
         lineItems: event.data.checkout.lineItems.map((li) => {
             return {
                 ...li,
                 productId: li.id,
                 productName: li.title,
                 variantId: li.variant.id,
                 variantName: li.variant.title || li.variant.product.title,
                 price: li.variant.price.amount,
                 quantity: li.quantity,
             }
         }),
     });
 });

 // End: Northbeam Events

Shopify Post-Purchase Upsell Page

If you use Post-Purchase on Shopify, please follow the instructions below to add the post-purchase pixel.

🚧

Only follow these instructions if you use one-click upsell to upsell customers after checkout

  1. Copy the script code below to your clipboard. Be sure to replace {DATA_CLIENT_ID} with your unique Northbeam Data Client ID, which you can find here.
<!-- Begin: Northbeam Shopify post purchase upsell pixel -->
<script>(function(){var r;(e=r=r||{}).A="identify",e.B="trackPageView",e.C="fireEmailCaptureEvent",e.D="fireCustomGoal",e.E="firePurchaseEvent",e.F="firePurchaseSyncEvent";var e="//j.northbeam.io/ota-sp/{DATA_CLIENT_ID}.js";function t(e){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];a.push({fnName:e,args:n})}var a=[],n=((n={_q:a})[r.A]=function(e,n){return t(r.A,e,n)},n[r.B]=function(){return t(r.B)},n[r.C]=function(e,n){return t(r.C,e,n)},n[r.D]=function(e,n){return t(r.D,e,n)},n[r.E]=function(e){return t(r.E,e)},n[r.F]=function(e){return t(r.F,e)},window.Northbeam=n,document.createElement("script"));n.async=!0,n.src=e,document.head.appendChild(n);})()</script>
<script>
  (function() {
    var snowplow = window._nbq = window._nbq || function () {
      window._nbq.q = window._nbq.q || [];
      window._nbq.q.push(arguments);
    };
    window._nbq.q = window._nbq.q || [];

    var order = window.Shopify.order;
    if (!order) {
      return;
    }

    fireVersionEvent();
    fireConversionEvent();

    function fireVersionEvent() {
      snowplow(
        "trackStructEvent:nb",
        "__nb_internal",
        "shopify-post-purchase-tag-version",
        String(order.number),
        "18858c3ca5cfd669cf3acede4c992e0b85328fa4",
      );
    }

    function fireConversionEvent() {
      // TODO: check that order.lineItems works
      for (var i = 0; i < order.lineItems; ++i) {
        var lineItem = order.lineItems[i];
        var sku = {
          product: String(lineItem.product.id),
          variant: String(lineItem.variant.id),
        };

        snowplow(
          "addEnhancedEcommerceProductContext:nb",
          JSON.stringify(sku, Object.keys(sku).sort()),
          lineItem.title,
          "",
          "", // Vendor
          "",
          "", // Variant title
          String(lineItem.originalPrice),
          String(lineItem.quantity),
          "",
          null,
          order.currency,
        );
      }

      snowplow(
        "addEnhancedEcommerceActionContext:nb",
        String(order.number),
        "__nb_shopify",
        String(order.totalPrice),
        "0.0", // Tax price
        "0.0", // Shipping price
        "",    // Coupons
        "",
        null,
        "",
        order.currency,
      );

      snowplow("trackEnhancedEcommerceAction:nb", "purchase");
    }
  })();
</script>

<!-- End: Northbeam Shopify post purchase upsell pixel -->
  1. Go to your Shopify admin panel.
  2. Click on Settings in the bottom left hand corner.
  1. Click on Checkout once you are on the Settings page.
  1. Scroll down to the Post-purchase page section, and paste the code (from step 1) in the Additional Scripts section.

Updated 2 months ago