Troubleshooting Shopify Performance Issues with Azure Application Insights

Recently I was looking at a Shopify store and the customer wanted to get a better understanding of the customer experience. They suspected a couple of performance issues existed that was having an adverse effect but they were unable to be sure.

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.

You May Also Like

About the Author: michaelstephensonuk