Integrate Your Data With Shopify

Getting Started

1. Go to the projects page inside of the Stormly application and click Set-Up Data as shown below:
   
   
   
   
2. Under "Use tracking code from:" pick "Segment.com", then copy the API key as shown below:
   
   
   
   
3. Copy the API Key. You will need it in the next step.

Note: Tracked data becomes available in Stormly within seconds usually, but new projects become "active" only once at least 50 unique users are tracked.

Shopify Code Setup

First login to your shopify admin panel as shown in the image below. Then click Online Store and then Edit Code on the right side of the page, under the Actions dropdown, as shown below:

Once you're in the code editor, you'll see something like in the image below. There's two folders Layout and Templates. Each of the instructions in the following sections indicates which folder, and which page under each folder you need to edit. Once you've pasted the code, click Save for each page.

Tracking Setup

In folder Layouts and file theme.liquid add code below to the line above the </head> tag.
Important: Make sure you replace YOUR_STORMLY_KEY_HERE in the code below with the API KEY key found in Getting Started section in the Stormly setup page.
Copy code below
<script type="text/javascript">(function(e,t,n,r,i,s,o){e["StormlyObject"]=i;e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},s=t.createElement(n),o=t.getElementsByTagName(n)[0];s.async=1;s.src=r;o.parentNode.insertBefore(s,o)}) (window,document,"script","//cdn.stormly.com/assets/tracking/t.js","stormly");</script> <script type="text/javascript"> stormly("create", "YOUR_STORMLY_KEY_HERE", {anonymizeIP: false, storeOnlyOneCookie: true}); // identify the customer if they have an account {% if customer.id %} stormly("identify", "{{customer.id}}"); stormly("set", { name: "{{ customer.name }}", firstName: "{{ customer.first_name }}", lastName: "{{ customer.last_name }}", email: "{{ customer.email }}", phone: "{{ customer.default_address.phone }}", address: { // uses the default address street: "{{ customer.default_address.street }}", city: "{{ customer.default_address.city }}", state: "{{ customer.default_address.province }}", stateCode: "{{ billing_address.province_code }}", postalCode: "{{ customer.default_address.zip }}", country: "{{ customer.default_address.country }}", countryCode: "{{ customer.default_address.country_code }}" }, totalSpent: "{{ customer.total_spent }}", allOrdersCount: {{ customer.orders_count | default: 0 }}, allOrderIds: [{% for order in customer.orders %}{{ order.id }},{% endfor %}], tags: ["{{ customer.tags | join: '", "' }}"] }); {% endif %} </script>

Product Category / Collection Page

In folder Templates and file collection.liquid add code below to the top of the page.
This tracks product category and product collection pages:
Copy code below
<script type="text/javascript"> stormly("event", "Viewed Product Category", { category: "{{ collection.title }}", categoryUrl: "{{ collection.url }}", categoryProductCount: {{ collection.all_products_count }}, {% if collection.current_type %} filteredType: "{{ collection.current_type }}",{% endif %} {% if collection.current_vendor %} filteredVendor: "{{ collection.current_vendor }}",{% endif %} defaultSortBy: "{{ collection.default_sort_by }}" }); </script>

Product Pages

In folder Templates and file product.liquid add code below to the top of the page.
This tracks users when viewing a product, and also when adding a product to their shopping cart:
Copy code below
<script type="text/javascript"> stormly("event", "Viewed Product", { id: "{{ product.id }}", name: "{{ product.title }}", type: "{{ product.type }}", url: "{{ product.url }}", price: {{ product.price }}, priceMin: {{ product.price_min }}, priceMax: {{ product.price_max }}, priceVaries: {{ product.price_varies }}, variantsCount: {{ product.variants.size }}, firstAvailVariant: "{{ product.first_available_variant.title }}", variantSku: "{{ product.first_available_variant.sku }}", variantId: {{ product.selected_or_first_available_variant.id | default: 0 }}, variantAvailable: {{ product.selected_or_first_available_variant.available | default: false }}, variantCompareAtPrice: {{ product.selected_or_first_available_variant.compare_at_price | default: 0 }}, variantQuantity: {{ product.selected_or_first_available_variant.inventory_quantity | default: 0 }}, variantPrice: {{ product.selected_or_first_available_variant.price | default: 0 }}, variantSelected: {{ product.selected_or_first_available_variant.selected | default: false }}, variantTitle: "{{ product.selected_or_first_available_variant.title }}", variantUrl: "{{ product.selected_or_first_available_variant.url }}", variantWeight: {{ product.selected_or_first_available_variant.weight | default: 0 }}, vendor: "{{ product.vendor }}", collections: [{% for collection in product.collections %}"{{ collection.title }}",{% endfor %}], available: {{ product.available }}, options: ["{{ product.options | join: '", "' }}"], optionsCount: {{ product.options.size }}, tag: ["{{ product.tags | join: '", "' }}"] }); function waitForDocReady(fn) { if (document.readyState === "complete" || document.readyState === "interactive") { setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } } waitForDocReady(function(){ // track Product Added event var form = document.getElementById('add-to-cart'); if (!form) { form = document.querySelectorAll('[data-product-form]')[0]; } if (!form) { form = document.getElementById('AddToCartForm--product-template'); } if (!form) { form = document.querySelectorAll('form[action="/cart/add"]')[0]; } if (form) { form.addEventListener("submit", function(evt){ evt.preventDefault(); stormly("event", "Added Product", { buyNow: false, id: "{{ product.id }}", name: "{{ product.title }}", type: "{{ product.type }}", url: "{{ product.url }}", price: {{ product.price }}, priceMin: {{ product.price_min }}, priceMax: {{ product.price_max }}, priceVaries: {{ product.price_varies }}, variantsCount: {{ product.variants.size }}, firstAvailVariant: "{{ product.first_available_variant.title }}", variantSku: "{{ product.first_available_variant.sku }}", variantId: {{ product.selected_or_first_available_variant.id | default: 0 }}, variantAvailable: {{ product.selected_or_first_available_variant.available | default: false }}, variantCompareAtPrice: {{ product.selected_or_first_available_variant.compare_at_price | default: 0 }}, variantQuantity: {{ product.selected_or_first_available_variant.inventory_quantity | default: 0 }}, variantPrice: {{ product.selected_or_first_available_variant.price | default: 0 }}, variantSelected: {{ product.selected_or_first_available_variant.selected | default: false }}, variantTitle: "{{ product.selected_or_first_available_variant.title }}", variantUrl: "{{ product.selected_or_first_available_variant.url }}", variantWeight: {{ product.selected_or_first_available_variant.weight | default: 0 }}, vendor: "{{ product.vendor }}", collections: [{% for collection in product.collections %}"{{ collection.title }}",{% endfor %}], available: {{ product.available }}, options: ["{{ product.options | join: '", "' }}"], optionsCount: {{ product.options.size }}, tag: ["{{ product.tags | join: '", "' }}"] }); setTimeout(function() { form.submit(); }, 300); }); } var checkBuyNowExists = setInterval(function() { var buyNowBtn = document.querySelectorAll('[data-testid="Checkout-button"]')[0]; if (buyNowBtn) { clearInterval(checkBuyNowExists); buyNowBtn.addEventListener("click", function(evt){ stormly("event", "Added Product", { buyNow: true, id: "{{ product.id }}", name: "{{ product.title }}", type: "{{ product.type }}", url: "{{ product.url }}", price: {{ product.price }}, priceMin: {{ product.price_min }}, priceMax: {{ product.price_max }}, priceVaries: {{ product.price_varies }}, variantsCount: {{ product.variants.size }}, firstAvailVariant: "{{ product.first_available_variant.title }}", variantSku: "{{ product.first_available_variant.sku }}", variantId: {{ product.selected_or_first_available_variant.id | default: 0 }}, variantAvailable: {{ product.selected_or_first_available_variant.available | default: false }}, variantCompareAtPrice: {{ product.selected_or_first_available_variant.compare_at_price | default: 0 }}, variantQuantity: {{ product.selected_or_first_available_variant.inventory_quantity | default: 0 }}, variantPrice: {{ product.selected_or_first_available_variant.price | default: 0 }}, variantSelected: {{ product.selected_or_first_available_variant.selected | default: false }}, variantTitle: "{{ product.selected_or_first_available_variant.title }}", variantUrl: "{{ product.selected_or_first_available_variant.url }}", variantWeight: {{ product.selected_or_first_available_variant.weight | default: 0 }}, vendor: "{{ product.vendor }}", collections: [{% for collection in product.collections %}"{{ collection.title }}",{% endfor %}], available: {{ product.available }}, options: ["{{ product.options | join: '", "' }}"], optionsCount: {{ product.options.size }}, tag: ["{{ product.tags | join: '", "' }}"] }); }); } }, 100); }); </script>

View Shopping Cart Page

In folder Templates and file cart.liquid add code below to the top of the page.
This tracks users viewing their shopping cart, as well as clicking the payment buttons:
Copy code below
<script type="text/javascript"> stormly("event", "Viewed Cart", { itemCount: {{ cart.item_count }}, totalPrice: {{ cart.total_price }}, totalWeight: {{ cart.total_weight }} }); function startPaymentFn(paymentType) { stormly("event", "Start Payment", { paymentType: paymentType || "standard", itemCount: {{ cart.item_count }}, totalPrice: {{ cart.total_price }}, totalWeight: {{ cart.total_weight }} }); } var checkoutBtnExists = setInterval(function() { var checkoutBtn = document.querySelectorAll('input[name="checkout"]')[0]; if (checkoutBtn) { clearInterval(checkoutBtnExists); checkoutBtn.addEventListener("click", function(evt){ startPaymentFn("standard"); }); } }, 100); var checkoutXCheck = setInterval(function() { var form = document.querySelectorAll('form[action="/cart"]')[0]; if (!form) { form = document.querySelectorAll('form.cart')[0]; } if (form && form.getAttribute("data-checkout-x-form")) { var payBtn = document.querySelectorAll('button[name="checkout"]')[0]; if (payBtn) { clearInterval(checkoutXCheck); payBtn.addEventListener("click", startPaymentFn); } } }, 100); var googlePayBtnExists = setInterval(function() { var googlePayBtn = document.querySelectorAll('[data-testid="GooglePay-button"]')[0]; if (googlePayBtn) { clearInterval(googlePayBtnExists); googlePayBtn.addEventListener("click", function(evt){ startPaymentFn("google"); }); } }, 100); var paypalPayBtnExists = setInterval(function() { var paypalIframe = document.querySelectorAll('iframe[title="Checkout with PayPal"]')[0]; if (paypalIframe) { var paypalPayBtn = paypalIframe.contentDocument.querySelector('.paypal-button[role="button"]'); if (!paypalPayBtn) { paypalIframe.contentDocument.querySelector('[data-funding-source="paypal"]'); } if (paypalPayBtn) { clearInterval(paypalPayBtnExists); paypalPayBtn.addEventListener("click", function(evt){ startPaymentFn("paypal"); }); } } }, 100); </script>

Landing Page

In folder Templates and file index.liquid add code below to the top of the page.
This tracks users visiting the main landing page:
Copy code below
<script type="text/javascript"> stormly("event", "Viewed Landing Page"); </script>

Search Page

In folder Templates and file search.liquid add code below to the top of the page.
This tracks users using the search option:
Copy code below
{% if search.performed %} <script type="text/javascript"> stormly("event", "Searched Products", { resultsCount: {{ search.results_count }}, terms: "{{ search.terms }}" }); </script> {% endif %}

Signup For Account

In folder Templates and file customers/register.liquid add code below to the top of the page.
This tracks product category and product collection pages:
Copy code below
<script type="text/javascript"> stormly("event", "Viewed Registration"); var form = document.querySelector('form[id="create_customer"]'); form.addEventListener("submit", function(evt){ evt.preventDefault(); var firstName = document.querySelector('input[name="customer[first_name]"]').value; var lastName = document.querySelector('input[name="customer[last_name]"]').value; var email = document.querySelector('input[name="customer[email]"]').value; stormly("event", "Signed Up", { firstName: firstName, lastName: lastName, email: email }); setTimeout(function() { form.submit(); }, 300); }); </script>

Page Doesn't Exist

In folder Templates and file 404.liquid add code below to the top of the page.
This tracks users that visit a page that doesn't exist (anymore):
Copy code below
<script type="text/javascript"> stormly("event", "Viewed Non-Existing Page"); </script>

Product Category / Collection Page

In folder Templates and file blog.liquid add code below to the top of the page.
This tracks users that visit the blog main page listing all articles:
Copy code below
<script type="text/javascript"> stormly("event", "Viewed Blog", { pageTitle: document.title, blogArticleCount: {{ blog.articles_count }}, blogTitle: "{{ blog.title }}", blogUrl: "{{ blog.url }}" }); </script>

Read Blog Article

In folder Templates and file article.liquid add code below to the top of the page.
This tracks uses that read a blog article:
Copy code below
<script type="text/javascript"> stormly("event", "Viewed Blog Post", { pageTitle: document.title, articleTitle: "{{ article.title }}", articleAuthor: "{{ article.author }}", articleCreatedAt: "{{ article.created_at | date: "%F" }}", articlePublishedAt: "{{ article.published_at | date: "%F" }}", articleCommentCount: {{article.comments_count }}, articleTags: ["{{ article.tags | join: '", "'}}"], articleUrl: "{{ article.url }}" }); </script>

Payment Completed Page

This tracks user payment completion. First login to your shopify admin panel as shown in the image below. Then click Settings at the bottom. Then on the right side of the page, click the Checkout link, as shown below:

Once you're in the checkout settings, scroll down to where you see a section Additional Scripts, like in the image below. In the box paste the script code below. If there is existing code, don't overwrite it, but paste it above the existing code.
Important: Make sure you replace YOUR_STORMLY_KEY_HERE in the code below with the API KEY key, as you did earlier and described at the top of this page.

Copy code below
<script type="text/javascript">(function(e,t,n,r,i,s,o){e["StormlyObject"]=i;e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},s=t.createElement(n),o=t.getElementsByTagName(n)[0];s.async=1;s.src=r;o.parentNode.insertBefore(s,o)}) (window,document,"script","//cdn.stormly.com/assets/tracking/t.js","stormly");</script> <script type="text/javascript"> stormly("create", "YOUR_STORMLY_KEY_HERE", {anonymizeIP: false, storeOnlyOneCookie: true}); stormly("event", "Completed Order", { orderId: {{ order_number }}, total: {{ total_price | money_without_currency | remove: ',' }}, revenue: {{subtotal_price | money_without_currency | remove: ',' }}, shipping: {{shipping_price | money_without_currency | remove: ',' }}, tax: {{tax_price | money_without_currency | remove: ',' }}, discount: {{ discounts_amount | money_without_currency | remove: ','}}, products: [ {% for line_item in line_items %} { id: "{{ line_item.id }}", sku: "{{ line_item.sku }}", name: "{{ line_item.title }}", price: {{ line_item.price }}, quantity: {{ line_item.quantity }} }, {% endfor %} ] }); </script>