Publisher Customization Tool Development

Technology Stack

Vue JS
Laravel

The Challenge

The client, EyeonX.ch, is an advertising agency which deals in web advertising. They have ads published on around 400 websites in various formats.

To show an advertisement in a publisher website, they provide a code snippet to the publisher to add to the website. This code snippet calls a JS file, which is responsible for showing the advertisement in the predefined area of the website.

But in various publisher websites, to show the ad properly, there are some small style and JS modifications needed. These modifications would be website specific (not for all the sites), so these CSS and JS were written in the main JS file only.

That was a big issue. The problem is that the main JS file with all the custom rules in it was served to all the publishers. But it included some publisher-specific CSS and JS.

So if there is wrong coding in just one of the script in the main JS file, it caused an error, the entire campaign didn’t run, and everyone would lose money and time.

The Solution

The client came up with the idea of removing those website specific codes from the main JS file and keeping them in separate, publisher-specific files. So even if the code is off for one site, the other sites will run just fine.

Our solution was to make a tool called PCT: Publisher Customization Tool. This tool would separate those codes into separate JS files for each publisher. And each newly created file would inject the publisher website with some custom CSS and JS.

Further, this tool is only to be used by the admin, EyeonX.ch. Not by publishers.

Features

The user can log in to the app, see the list of existing publishers, add custom CSS and JS, and activate and deactivate cards.

Edit, Add, and Customize a List of Publishers

Here you can see all the publisher cards. For each publisher card, we have a separate file where custom files are being written. These are accessed whenever you open a publisher website. It calls the files from the server, and from there it finds the exact JS file you need.
Users can edit the information from a particular publisher, i.e. the publisher name.
Users can also pull up the relevant CSS and JS files in each card. If the code is wrong, there is the option to include a link detailing the error, so the developer can go back and fix it.
That way, individual files can be fixed without affecting the whole advertising campaign.

Functional Browsing

We can sort by ascending or descending order. There’s a search function to quickly and easily search by names.
There’s a bulk action tab to activate or deactivate. You can select and perform the action on individual cards, or you can just select all and activate or deactivate them.
When you select “add a new card,” you can add the publisher name, and email, the host name, and custom CSS or JS. Then the file is added.
We can also pull up a list of other users. The users are the only ones who can access the tool and make the changes. You can edit, search, and select them just like the list of publishers.