Recently I was looking at a Shopify store and the customer wanted to get a better understanding of the customer experience. Anyone who knows me will be well aware that I rarely turn down the chance to brainstorm Shopify store ideas. This wasn’t the first time and it won’t be the last time either! They suspected a couple of performance issues existed that was having an adverse effect but they were unable to be sure. Shopify is an extremely difficult platform to be visible in which is why shopify seo is so effective. It allows businesses that use Shopify to reach and interact with their customers as seen through tools similar to these clickfunnels templates. Nonetheless, solving performance issues on Shopify can be even harder.
We decided that we should look to use Azure App Insights which has the ability to tell us about javascript performance on the client side and gives us the ability to determine things about a customers technical usage of the shop. This can help us to determine where issues may lie.
One thing to note however is that unlike with ASP.net, this shop is running as SaaS on the Shopify platform so I don’t have access to the server side experience so we will only be using the javascript features of App Insights.
Here is how to set it up?
Step 1 – Setup Application Insights
To begin with you must setup an application insights instance in the Azure Portal. Theres plenty of information out there on how to do this and its very easy so I am not going to do a detailed walk through on this step.
Step 2 – Get the Javascript to Add to your Store
Once your App Insights instance is up and running you can go to the Getting Started section and you can get a javascript snippet to add to your application. Below shows how to get this.
Step 3 – Add to your Shops code
In Shopify you can go into the code editor for your theme. Most themes have a file called Theme.liquid. This is the main file used on all pages.
In this file I have added my app insights javascript element in the html header section as you can see below. Below shows where I added the snippet.
Step 4 – Save your App
If you save your web app and now start browsing pages you will begin to see telemetry coming into app insights within a few seconds and then you will get a good view of customer behaviour.
Below shows an example of some of the customer experience by showing me telemetry from the browser indicating performance and usage which I can use to infer customer experience.
Hopefully you can see that it is very easy to configure shopify to use Azure App Insights which in turn gives you a lot of useful telemetry about the customers view of your shop and can help you to workout performance issues and usage issues to optimize your store for great customer journey.
With the results from App Insights I was able to determine there was a plugin app from the Shopify app store which had a couple of performance issues which we removed and the customers store worked much better.
