Custom Grids

Executive summary

An adtech company that manages tens of thousands of campaigns across multiple DSPs needed a faster, collaborative, all-encompassing, and more scalable way for its programmatic team to make daily pacing adjustments.

We implemented a custom data grid that completely replaced the legacy campaigns page.

This change allowed the team to easily sort, filter, search, and pace campaigns in a fully customized and improved layout, resulting in significant time savings, increased throughput, and fewer errors. The implementation marked a major step forward in the company's campaign-handling capabilities and overall scalability.

Key results

• More campaigns paced and delivered in full, increasing client satisfaction
• Fewer hours spent on pacing
• Reduced training time for new team members
• Better experience for internal users

Context

The legacy page was (seldom) maintained by the engineering team, so bug and feature tickets were either backlogged or slow to be addressed. The bigger issue was that no amount of tickets could achieve what was actually needed: a completely different tool tailored to the team's needs, preferences, and workflow.

Problems

No DSP-level attributes

Since the legacy web page was difficult to update and enhance, powerful DSP-level fields were never added by the engineering team.

Limited data

Due to performance constraints, only ~10 columns of data were shown, restricting the team's ability to make informed pacing decisions. Critical metrics and pieces of information that weren't included had to be looked up elsewhere, leading to inefficiencies and missed opportunities for optimization.

Limited filters

Users had to regularly sift through campaigns to find the ones matching their target criteria. This process was time-consuming and error-prone.

Forced pagination

To avoid performance issues, users had to navigate through pages showing only 100 campaigns each, which reduced overall productivity. It didn't help that each page was slow to load.

Slow search

Since search was done on the server with an inefficient query, users experienced significant delays when trying to locate specific campaigns.

Insufficient formatting and styling

It was difficult to quickly identify problematic campaigns since all rows, columns, and cells looked the same.

No export options

There was no way to download pacing data for specific campaigns. This made creating reports for clients manual and tedious.

Solution

After talking to users and managers, we confirmed that the months of planning and development the company's engineering team needed to build all the required features from scratch would be a massive burden.

In just 2 weeks, we deployed a standalone web app, accessible to authenticated users only, that contained a custom data grid for campaign pacing. The solution was quickly adopted because it addressed all pain points and delivered critical features. Since the app had its own repository and deployment pipeline, we were able to move fast without worrying about affecting the company's platform or release schedule.

Full data visibility

Intraday pacing data stored in Amazon S3 was pulled via Amazon Athena. Other data requested by the team was pulled in from Amazon Aurora. We joined the datasets and applied a few transformations in the backend to handle certain edge cases. The 26 columns in total were displayed in the grid in the desired order.

Since AG Grid is extremely performant, we didn't use pagination and didn't have to worry about limiting the number of columns. The team had instant access to full data for tens of thousands of campaigns. Since multiple DSPs were involved, we also included direct links to the external campaign pages at the row level, and only showed cell values for certain columns if they pertained to the row's DSP.

Persistent statuses

The team wanted the ability to mark campaigns as reviewed each day. We made a new table in Amazon Aurora to store the timestamp each campaign ID was marked at, along with the user who marked it. A checkbox at the row level would trigger an update to the table, and the reviewed status column was filterable, making it easy for the team to stay organized and in sync. By also logging the authenticated user, we made it possible to audit historical updates and track productivity if so desired.

Powerful filters

AG Grid comes with column-level filters; we also set up external filters above the grid to create “views” for the team. A single click of a button would instantly filter the grid to show only the campaigns that corresponded to the view's criteria. This covered both frequently used and highly specific filters. For example, it was standard to check campaigns with only a few days remaining. That could have been done by typing in the “Days Remaining” column filter, but it was better to just make it a 1-click step via an external filter. Other external filters used custom JavaScript functions with more logic to create their views, which made it easy for the team to split up the workload.

Instant search

Grid-level and column-level search were added to make quick lookups easy. Instead of waiting for the server to run a query, users were able to find what they needed with no latency. Since the grid had many campaign details and made search painless, it became the go-to reference tool for multiple teams.

Formatting and styling

Rows with under-pacing campaigns were highlighted red to make them easier to spot, and certain columns were highlighted purple for differentiation. For columns with critical pacing metrics, we wrote a custom JavaScript function to determine background and text colors. Shades of red, yellow, and green were used to visually indicate the health of each KPI at a glance. Date and currency columns also had their own functions to display values in the formats requested by the team.

Export

Users were able to easily download and copy the data they needed from the grid, making it easy to generate reports and use the data elsewhere.