Before Noibu can collect session data from your eCommerce website, you must deploy the Noibu script to your website's header. If your store is built on Shopify, you may be able to add the script to your site's global header. However, be advised that not all Shopify plans accommodate the Noibu script:
| Shopify Plan | Compatible with Noibu Script? |
|---|---|
| Shopify (Regular) | Yes, except Checkout |
| Shopify Basic | No |
| Shopify Advanced | No |
| Shopify Lite | Yes, except Checkout |
| Shopify Plus | Yes |
Noibu accommodates Shopify's Enhanced Checkout through a Checkout WebPixel.
Shopify Liquid Deployment
1. Navigate to the admin console for your store.
2. Click into "Online Store" and then into "Themes"
3. Click on the three dots next to the "Customize" button and "Edit code"
4. On the "theme.liquid" file, add in the Noibu tag as shown below in between the <head> tags.
{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}
{% render 'meta-tags' %}
<script src="{{ 'constants.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'pubsub.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
<script src="https://cdn.noibu.com/collect.js"></script>
{{ content_for_header }}
{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}
5. If on Shopify PLUS, you will also need to add the Noibu Tag on the "checkout.liquid" template file. (Note that this is only available on the Plus tier of Shopify, other tiers will not have any tracking ability on the checkout yet)
<script src="https://cdn.noibu.com/collect.js"></script>
If your store is built on an eCommerce platform like Magento, you can paste the script directly in the site's header. Deploying the Noibu script through a tag manager–like Google Tag Manager, Adobe Launch, or Tealium IQ–follows a different process.