Flux Vision: An open source package to supercharge your Shopify analytics with Twilio Segment

Editor's note: This is a guest post by Stephen Grable, a software engineer at Floorforce and AdHawk. A version of this article first appeared on Medium.

If you are working with Shopify as a software engineer and looking for a cutting-edge, flexible implementation of analytics, this article is for you.

As software engineers, we’re used to having modern tools at our fingertips to assist us in almost every domain. When it comes to analytics, it is no different. There are a ton of possible integrations and tools out there that you can utilize.

The industry standard is Google with Google Analytics and Google Tag Manager. But as your business starts to grow, you will likely begin to integrate and send user data to other services like Snowflake Data Warehouse, Hubspot Customer Relationship Manager and even Slack for team notifications.

To handle all of these integrations in a high growth business, you’ll need to be able to turn solutions on and off quickly. One of the best tools to enable this functionality is Segment.

Why use Segment?

You can use Segment as an abstraction layer within your code to send user data to all of the services that will need it with only one API call. This is incredibly powerful as a software engineer. This flexible and dynamic interface will allow you to scale your data needs efficiently without having to employ engineers to make code tweaks with each new data service you add to your business.

Needless to say, I love Segment and we use it exclusively for all of our analytics implementations in code here at FloorForce, Adhawk, and FlooringStores. Now that I’ve convinced you to check out Segment, let’s look at how you can add all of its capabilities to your Shopify e-commerce store and checkout.

Shopify Analytics: the basics

Shopify has some great pre-built integrations with Google Analytics products that are fantastic for non-technical users who want to get up and running quickly.

To enable these out-of-the-box solutions, users can paste their Google Analytics ID code into the Shopify dashboard and start receiving user data in no time.

However, if you’re a software engineer looking to adhere to data analytics best practices by using Segment everywhere, you’ll need to build your solution from scratch. Or at least, you used to need to implement this from the ground the up.

I was recently tasked with this exact requirement and I realized that the custom code I was writing could easily be extracted and applied to almost any Shopify checkout experience.

So, I built an open source package that utilizes Shopify’s custom checkout theme to enable Segment integration out of the box.

Disclaimer: to gain the ability to edit your checkout.liquid code and implement this package, Shopify requires that you have a Shopify Plus account. You likely won’t need this implementation until you hit that scale but when you do, this package will assist your growing data needs.

Introducing Flux Vision 👁️ 💧

Flux Vision is an open source frontend package designed to be added to your Shopify checkout theme and used in tandem with Segment.

It enables scalable analytic integrations with all the current and future data needs of your business. You can check out the source code here.

If you’re new to developing solutions within the Shopify environment, this package is for you.

To start, Shopify gives its users some control over how their checkout experience looks. If you want to create a custom look and feel, you’ll be doing most of your work in Shopify’s Liquid templating language.

There are a lot of intricacies to Liquid. I’ve spent countless hours within their documentation to create this package. If you can leverage my work to save you hours and days doing the same, then it’s an easy choice on your end.

At this point, if you want to jump over to implementing Flux Vision into your Shopify checkout Liquid code, you won’t hurt my feelings. All the steps needed are described in the documentation on the Flux Vision Github repo.

If you want to understand a bit about how the package works internally, #1 welcome to the nerd club and #2 keep reading because I’ll get into that below.

Shopify’s Liquid template deep dive

To give you some background, here is how Shopify introduces Liquid within their documentation:

“Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.”

Pretty straightforward.

Let’s now move over to the Flux Vision implementation.

In our documentation for installation, you’ll see that you have to add a <div> tag within the Liquid code for your checkout. Here is what that <div> should look like:

<div id="FLUX_VISION_DATASETS" style="display:none"> <div id="checkout-data" data-checkout-id="{{checkout.id}}" data-order-number="{{checkout.order_number}}" data-total-price="{{checkout.total_price}}" ></div> {% for item in checkout.line_items %} <div id="product-item-for-analytics-dataset" data-name="{{item.title}}" data-sku="{{item.sku}}" data-price="{{item.price}}" data-quantity="{{item.quantity}}" data-url="{{item.url}}" ></div> {% endfor %} </div>

Some things you should notice here is that we set an identifying  id='FLUX_VISION_DATASETS’ on this div and render it to be hidden on the page.

We do this so we can access these elements from within the Flux Vision script but not render them visible on the page.

You’ll also notice I am adding data attributes to the child elements by prefixing data-* on them and using the Liquid bracket syntax , {{}}, for injecting the desired variables. If you’ve used Mustache before, this will feel familiar.

One thing I’d like to point out before moving on is the implementation of datasets.

Datasets are HTML elements that contain read-only properties supported in almost every browser today.

Datasets are particularly handy when you want to inject and retrieve data from the DOM in an efficient way. Within Liquid, we use the {{data-here}} syntax to extract data points from the current checkout instance into our datasets for easy retrieval within our Flux Vision script.

Looking farther down the code snippet above, you’ll see I’m doing a couple of interesting things that you may not be familiar with if you are new to the Liquid language.

This block below is particularly noteworthy:

{% for item in checkout.line_items %} ... {% endfor %}

This code is going to run a loop through all of the user’s line_items which, put simply, is every product that they currently have in their cart at checkout time.

Within this loop, we create our dataset <div> elements that contain all the relevant product information for a given user.

In production code here at Adhawk and FloorForce, we follow the Enhanced E-Commerce Spec from Google Tag Manager. That spec requires detailed product information. This snippet above gives us everything we need to adhere to and meet those requirements for our analytics setup.

If you also want to follow that spec, check out our other open source package for the GTM Enhanced extension to Segment here which you can use in tandem with this Flux Vision package.

Shopify checkout steps

When a user enters the Shopify checkout flow, they will proceed through multiple steps: contact_information, shipping_method, payment_method and finally, the thank_you page.

Within the Flux Vision script, we pull these steps from the Liquid code to determine which analytic.track() Segment event objects to send. We follow the Segment V2 e-commerce event spec here to implement the calls.

Check out the switch statement we use to enable this functionality here.

Open source ❤️

Building this package was an iterative process. Initially I was writing all of the code directly into Shopify’s Checkout Liquid template and testing the functionality with fake orders.

As the requirements grew for our analytics implementation, this became an increasingly error-prone and time consuming debugging process.

As I hit this wall, I took a step back and noticed the specific code I was writing could be extracted with a bit of work to become universally available. Then, following an object-oriented architecture, I created a script that I could test and check in to source code to utilize CI/CD to maintain in the long-term.

All of these advantages were enabled by taking a step back and re-thinking the use case of my code. Internalizing this type of open source mindset will almost always improve the code you are writing. It forces you to build interfaces designed for others instead of bespoke solutions only applicable in a single environment.

I'm excited to see how others will use Flux Vision to gather in-depth analytics about product information, checkout steps viewed, purchases and more. You can start using Flux Vision here, and sign up for Segment here.