Shopify Analytics Integration

Getting Started

Go to the projects page inside of the Stormly application and click Set-Up Data as shown below:
Under "Use tracking code from:" pick "Segment.com", then copy the API key as shown below:
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

Login to your Shopify admin panel, 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 two folders: Layout and Templates. Each of the instructions below indicates which folder and which file to edit. Click Save after pasting each snippet.

Tracking Setup

In folder Layouts / file theme.liquid — add the code below above the </head> tag.
Important: Replace YOUR_STORMLY_KEY_HERE with the API KEY from Getting Started.

Copy code

{% 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: {
      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 / file collection.liquid — add code below to the top of the page. This tracks product category and collection pages.

Copy code

Product Pages

In folder Templates / file product.liquid — add code below to the top of the page. This tracks users viewing a product and adding it to their cart.

Copy code

function waitForDocReady(fn) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
      setTimeout(fn, 1);
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    }
  }

waitForDocReady(function(){
    var form = document.getElementById('add-to-cart') ||
               document.querySelectorAll('[data-product-form]')[0] ||
               document.getElementById('AddToCartForm--product-template') ||
               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 }}",
          price: {{ product.price }},
          vendor: "{{ product.vendor }}"
        });
        setTimeout(function() { form.submit(); }, 300);
      });
    }

View Shopping Cart Page

In folder Templates / file cart.liquid — add code below to the top of the page. This tracks users viewing their shopping cart and clicking payment buttons.

Copy code

Landing Page

In folder Templates / file index.liquid — add code below to the top of the page. This tracks users visiting the main landing page.

Copy code

Search Page

In folder Templates / file search.liquid — add code below to the top. This tracks users using the search option.

Copy code

Signup For Account

In folder Templates / file customers/register.liquid — add code below to the top. This tracks product category and product collection pages.

Copy code

Blog Pages

In folder Templates / file blog.liquid — tracks users visiting the blog listing. In article.liquid — tracks users reading blog articles.

Copy blog.liquid code

Copy article.liquid code

Payment Completed Page

This tracks user payment completion. Login to your Shopify admin panel, click Settings at the bottom, then click the Checkout link:

Scroll down to the Additional Scripts section and paste the code below. If there is existing code, paste above it.
Important: Replace YOUR_STORMLY_KEY_HERE with the API KEY from Getting Started.

Copy code

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>

Integrate with Shopify

Getting Started

Shopify Code Setup

Tracking Setup

Product Category / Collection Page

Product Pages

View Shopping Cart Page

Landing Page

Search Page

Signup For Account

Blog Pages

Payment Completed Page