Deal Analytics for Publishers

Apurva Mulay
Oct 10 · 5 min read
Image for post
Image for post
Photo by Stephen Phillips - Hostreviews.co.uk on Unsplash

I have always been fond of leveraging data visualizations to visualize and interpret data; I was excited when I found out that my summer project would be building an analytics dashboard for Xandr Monetize!

The objective of the project was to visualize historical delivery and performance metrics. Visualization will help customers quickly understand whether a deal is meeting its goal, troubleshooting, or monitor whether changes resulted in improved delivery.

Now you must be thinking, doesn’t Xandr Monetize already offer data visualization? The short answer is yes, however, the graphs are separated across two different screens representing different metrics for each. Moreover, some graphs are available in internal tools and not directly visible to customers in the product. As you must have guessed, it is difficult for customers to map graphs on two different screens and come up with insights and conclusions, resulting in a subpar experience. Thus the “Insights” screen within the new Seller Monitor Workflow will combine all graphs on one single screen for easy reference by our customers!

What data are we visualizing?

There are two graphs: one representing historical delivery, and the other historical performance.

The Delivery chart displays target delivery, delivered budget, and remaining budget by day. Target delivery is calculated based on daily pacing allocation — an algorithm that derives the number of impressions or revenue that must be delivered on a specific day in order for the full budget to be delivered over the remainder of the flight. The same graph can represent data for the current day (“today”), the current flight, or lifetime (when the line item is running multiple flights).

Similarly, the Performance chart shows the performance metrics of the deal. The performance metrics include metrics like the viewability rate.

How are graphs developed at Xandr?

Developing graphs in Javascript is as easy as using any data visualization library in python! The credit goes to lucid-ui library and anx-react. Lucid is Xandr’s open-source library of React components from checkbox to charts. The code is written in React, Redux, D3.js, and Typescript. D3.js is primarily used for charts. Let’s see what lucid code looks like.

import React from ‘react’;import ReactDOM from ‘react-dom’;import { Button } from ‘lucid-ui’;ReactDOM.render(<Button>Hello World</Button>,mountNode);

How is lucid-ui used by Xandr? Lucid is used within an internal component library called anx-react, which contains more complex components that are built on top of the building-blocks provided by Lucid. Anx-react contains many of the proprietary UI controls and visualizations that we use to provide our customers with a cohesive user experience. Layering these libraries also allows us better control the release of our internal release lifecycles, which is important due to lucid being open-source, and new versions or features will be released periodically.

In its simplest form, anx-react acts as a shim, so, the above code would be revised as follows:

import React from 'react';import ReactDOM from 'react-dom';import { Button } from anx-react';ReactDOM.render(<Button>Hello World</Button>,mountNode);

However, some of the more interesting and dynamic forms of its usage come in the form of graphs! Now that we have reviewed the basics of lucid and anx-react, let’s dive into how graphs are built.

Building Graph visualizations with anx-react:

A majority of the fundamental source code used to build visualizations comes from lucid-ui, while anx-react provides means to compose these visualizations and encapsulate business logic that is specific to Xandr Invest and Xandr Monetize. The components folder contains all the components developed using React. There are various components related to charts, e.g. Bar Chart, Line Chart, Pie Chart which can then be supported by other lucid components.

For example, the below code shows the Responsive bar chart code taken from lucid-ui. It uses Bar Chart and Resizer components from lucid-ui.

import React from 'react';import createClass from 'create-react-class';import { BarChart, Resizer } from '../../../index';const data = [{ x: '2015-01-01', y: 1 },{ x: '2015-01-02', y: 2 },{ x: '2015-01-03', y: 3 },{ x: '2015-01-04', y: 5 },];const style = {paddingTop: '4rem',};export default createClass({render() {return (<div style={style}><Resizer>{(width /*, height */) => ( <BarChart  width={width}  height={width * 0.3}  data={data}  yAxisTitle='Revenue' />)}</Resizer></div>);
},
});

The end result is a flight bar chart that displays data across a X and Y axes:

Image for post
Image for post
Responsive bar graph

Complex Visualizations

This simplified example can be expanded further, leveraging other components in both lucid-ui and anx-react to build useful visualizations for many scenarios. In the section below, I will demonstrate some examples of visualizations for Line Item objects.

Delivery Chart

The delivery chart below shows the performance of Line Item from flight period of July 13 to July 16. As the graph shows, it has delivered more impressions on July 14, leaving fewer remaining impressions for July 15 and 16. Since we don’t see any gray section in the bar, the Line Item delivered all of its budget on a daily as well as an overall basis.

Image for post
Image for post
Delivery chart

Performance Chart

The Performance Charts below show the actual CPM (cost per thousand impressions) over the flight period of July 13 to July 16. It shows the trend of Actual CPM versus Cumulative CPM over the specified time period.

Image for post
Image for post
Performance chart

Conclusion

Building graphs using lucid and anx-react were immensely helpful, as it allowed me to quickly implement data visualizations, without having to invest in the construction of the fundamental components. The same component libraries are utilized across the entire engineering organization, which saves us time and promotes consistency across our products.

Not having to build these graphs from scratch allowed me to instead focus on important data and API aspects of the project, while also allowing me to spend time learning more about D3, and how I might leverage it to create more complex and useful visualizations.

My summer internship experience at Xandr was awesome and full of learning! Applying lucid-ui and anx-react to address customer problems through the Monetize platform was very rewarding. I was supported by my engineering team and our partners in product management throughout the summer in understanding the purpose and importance of the project which made this journey exciting and fulfilling!

About the Author

Apurva Mulay is currently a master’s student at Syracuse University studying Computer Science. Interests include learning new technologies, Ping pong (Table Tennis), and Marvel comics.

Apurva Mulay

Written by

Xandr-Tech

Our latest thoughts, challenges, triumphs, try-again’s, most snarky and profound commit messages. Our proudest achievements, deepest darkest technical debt regrets (just kidding, maybe). All the humbling yet informative things you learn when you try to do things with computers.

Apurva Mulay

Written by

Xandr-Tech

Our latest thoughts, challenges, triumphs, try-again’s, most snarky and profound commit messages. Our proudest achievements, deepest darkest technical debt regrets (just kidding, maybe). All the humbling yet informative things you learn when you try to do things with computers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store