Deal Analytics for Publishers
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:
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.
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.
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.
