Keyfer Mathewson

Get in touch

Say hi at [email protected]


Shopify - Marketing Analytics

Deliver metrics, insights, and reports to answer merchant's questions about traffic to their online store

What

This initiative aims to improve how merchants understand the state of their Marketing. We provide answers to some of the merchant’s most common questions regarding the traffic their online store is receiving.

On the Marketing dashboard, we provide users with four main metrics for their marketing:

  • Online store sessions
  • Sales from marketing
  • Orders from marketing
  • Ad spend on marketing

These metrics we’re determined to be the key metrics to measure the success of marketing initiatives, based on extensive user research and interviews.

We then dive deeper into a single one of these insights, Online store sessions, to provide the user with visualizations on their sessions, like:

  • Online store conversion
  • Top traffic sources
  • Top sales sources
  • Top traffic locations

One interesting thing to note is that we found that the number one most important thing merchants wanted to know about sessions was online store sessions by marketing activity, including first & last click attribution, and we were unable to accurately do that.

From there, we enable the merchant to explore their data further through a report, in which they can view their data against various date ranges and sorting structures.

How

My role in this project was both on the engineering side, helping the team build the visualizations, as well as work with the backend team to shape our APIs, as well as the engineering manager for Web, iOS, and Android.

The tech behind this project is quite as follows: our Web (front-end developers) team used D3.js to construct the visualizations inside of our React front-end, and queried for data using GraphQL,

On iOS and Android, all of the engineering and data visualizations are built from scratch, and data is again queried using GraphQL.

Fun problems

We ran into a few fun problems while working on this project, so I thought it might be interesting to share. I’ll try to either touch these within projects or on blog posts.

How do we properly combine D3.js and React

So, this is quite an interesting beast. This isn’t such a difficult concept, but we had to make a decision at the start of this project regarding how we were going to write our D3.js visualizations. There are a lot of blog articles on the net about how to write React based D3.js components, so I wont get into the how, but it’s important that you make a decisions and keep consistency throughout the course of the project.

For us, working in a React app, it made sense to continue the pattern of the rest of the company, and continue to write visualizations in React. This means that instead of your normal D3 code, which looks like this:

1
2
3
4
5
6
7
const svg = d3.select("#line_chart")
  .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
  .append("path")
    .attr("fill", "none")
    .attr("stroke", "steelblue");

Our team decided to write our charts as components, which, at a very simple level, looked more like this:

1
2
3
4
5
6
7
8
9
10
function LineChart () => {
  const width = 100;
  const height = 100;
  
  return (
    <svg width={width} height={height}>
      <path fill='none' stroke='steelblue' />
    </svg>
  );
}

The biggest factor in choosing to write our components this way is that it follows the practices and patterns of the rest of our work at Shopify. It is important to remember which framework is foundational, which is a layer, and to never confuse the two. Future hires who are being on-boarded to the team will only have to understand the fundamentals of React to work their way through the code, rather than both React and the intricacies of D3.js.

Wrapping SVG text is difficult at best

My wonderful co-worker Carys has written a blog post on this, as she understands the problem much deeper than me. You can check it out here!

Building a Sankey diagram is requires lots of trigonometry

While on Web we had access to the wonderful D3.js library, on iOS and Android it was quite a different story. For one of our upcoming visualizations we visualize online store conversion data with a Sankey diagram, and god it was technically challenging. Luckily, one of my colleagues found this repository which contained a mathematica notebook with source for drawing Sankey diagrams, as well as a few example commands.

Specifically, this notebook contained a diagram which was extremely beneficial in computing flow curves:

The end

This project was a blast. It gave me a lot of runway to experiment with D3.js, create some new patterns to be used throughout Shopify, and dive deep into important analytics for our merchants. The team is continuing to work on more visualizations and reports, and we’re so excited to share with you what we’ve got coming up next.