Dynamic Resource Loader


Background

One of the biggest challenges of managing a high traffic website with an significant media buy is keeping track of all the various 3rd party scripts and marketing tracking tags. Tags were constantly going up and coming down to match marketing campaigns and slow 3rd party scripts would negatively affect site performance.

Keeping track of all those tags was extremely time consuming, difficult to manage and error prone as you ran into file conflicts with other projects or coworkers. Making this even more difficult is the fact that many sections of the Boost website were controlled by 3rd party vendors who simply could not make the changes in time for the various campaigns and would charge ridiculous amounts of money for the changes if they could.

This was a frequent source of interuptions so I came up with the solution to insert all the tags dynamically via javascript. This allowed me to control all tags and resources in all environments from a single file and add/remove tags quickly.

Benefits

  • Significant improvement in productivity. Adding a new tag only took 2 lines of code and could be done in under a minute. Removals took even less time. Advanced conditions such as “load this tag only within the shop section” or “load this tag for all android phones” could be done easily with basic JavaScript. No manual hard coding. No updating hundreds of pages by hand.
  • Centralized resource management. Instead of the tags being hard coded into each individual page across the site, all tags are housed in a central location making it easy to manage a large number of tags.
  • Increase in site speed. All resources were post-loaded asynchronously so that slow 3rd party resources don’t negatively impact the user experience.
  • Cost savings. No more reliance on slow and expensive 3rd party vendors, we could insert the tags ourselves dynamically whenever we wished.
  • Eliminate risk. By removing dynamic resources from the work flow, this eliminated the risk of file conflicts with other developers or projects.

Code Examples

Javascript

GitHub: View

Screenshots

None


Technologies Used

  • Object Oriented Javascript
  • jQuery