WordPress page & Chart.js
Last year I collaborated on an exciting project with AGCS for Kayzen. Our focus was on developing a page that extracts information from the Programmatic Inventory Explorer tool. The tool displays a range of metrics related to mobile advertising, such as estimated market prices, impression volumes, and the number of unique reachable users.
To access the tool, please visit:
https://lp.kayzen.io/programmatic-inventory-explorer
The Programmatic Inventory Explorer was created with a strong emphasis on functionality. It offers insights into the mobile in-app inventory data accessible through Kayzen. Users are able to explore and analyze programmatic inventory, gaining valuable data on estimated market prices, impression volumes, and unique reachable users. The objective is to go beyond the limitations of closed ecosystems, giving marketers the opportunity to uncover new possibilities.
Goal
Our responsibility was to design and implement the Inventory Explorer on Kayzen’s website. I developed a tracking mechanism that connects the page in a realtime to a remote database, showcasing diverse metrics like CPM (Cost per mile, rate of spend divided by 1000 impressions), top apps and categories per operating system, and programmatic reach based on user-defined criteria. When the user changes the query the data is updated on the fly. The page is also optimized for mobile devices to ensure accessibility on the go.
Result
Challenges
During the development of this page, there were a couple of interesting challenges. One of them was to find the right query to access a couple of tables in the remote database and to present the data with Chart.js.
Chart.js is a free, open-source JavaScript library for data visualization, which supports eight chart types: bar, line, area, pie, bubble, radar, polar, and scatter. It turns out very nicely to showcase a simple chart for this project.
WordPress offers a couple of plugins that support data visualization through charts & infographics. Some of the plugins have built-in functionality to use Chart.js, ApexCharts, Google Charts, or Highcarts.
However, there might be limitations of what a plugin can offer, in that case, the best resource is to dig into the documentary of the charting library that you use. In my case it was Chart.js.
As you can see from the image above, the chart looks like a Line Chart, however, due to the requirement to present the data with a record of 5% and 95%, I ended up using a Scatter Chart and made a few modifications to make it look similar with a Line Chart.
Technology
- WordPress
- JavaScript
- Chart.js
- HTML
- CSS
About Kayzen
Kayzen empowers marketing teams to bring programmatic advertising in-house. Founded on the principles of performance, transparency, and control, Kayzen is a software platform that enables prominent app developers, agencies, and entrepreneurs to independently manage programmatic user acquisition, retargeting, and upper-funnel campaigns.
If you find this information interesting and would like to learn more about implementing such technology, please leave a comment.
Thank you.
