Case Study - RevContent Ad Network and The Google AMP Project

Google AMPHTML: Empowering Fast, Efficient Advertising with RevContent's Network Ad Component

In today's fast-paced digital world, ensuring that content loads quickly and efficiently is essential for both user experience and SEO. Google's AMP (Accelerated Mobile Pages) project has been a game-changer in optimizing mobile web pages for speed, focusing on delivering lightning-fast, user-friendly experiences. However, beyond content optimization, the world of digital advertising has also needed a similar transformation to ensure that ads load swiftly and do not compromise the performance of AMP pages. This is where AMPHTML, the ad component framework within the AMP project, comes into play.

AMPHTML allows for the integration of ads within AMP pages while maintaining the fast-loading principles that AMP stands for. By restricting the kind of JavaScript that can run on AMP pages, Google ensures ads don't slow down page load times or degrade the user experience. However, to comply with these stringent guidelines, ad networks often need to adapt their ad components to meet AMP's performance requirements.

One such success story comes from RevContent, a leading native ad network that provides content recommendation and native advertising solutions. RevContent needed to create a custom ad component that adhered to AMP's strict rules for ad serving. The challenge was met by Julien Chinapen, a Senior Software Engineer, who played a pivotal role in developing a JavaScript Network Ad Component specifically designed for the AMPHTML platform, allowing RevContent to get whitelisted and serve ads seamlessly within AMP-optimized pages.

In this blog post, we'll dive into the AMPHTML framework, the challenges Julien Chinapen faced while developing RevContent's ad component, and how his engineering expertise helped get the network's ads approved and whitelisted for the AMP ecosystem.

---

What is AMPHTML?

AMPHTML is a set of restrictions, APIs, and best practices that allow third-party content, particularly ads, to be served in a way that doesn't compromise the speed and performance of AMP pages. The core principle of AMPHTML is to ensure that ads and other third-party components don't block the rendering of a page or slow down the user's experience. To meet these performance goals, AMPHTML components must adhere to a few key constraints:

• No Blocking JavaScript: JavaScript that could block the page rendering is restricted. Only AMP-approved scripts are allowed.
• Performance Guarantees: All third-party content must be optimized for minimal loading time and must not interfere with the AMP page's performance.
• Ad Format Standardization: Ad formats must adhere to AMP's predefined templates for easy integration and consistent user experience across AMP pages.
• Strict Loading Rules: Ads must load lazily, ensuring they don't block the visible content of the page and that they don't delay the overall load time.

To achieve these objectives, AMPHTML relies heavily on the AMP for Ads framework, which governs how third-party ad networks integrate with AMP pages, ensuring compliance with AMP's performance and UX guidelines.

---

RevContent and the Need for AMP Compliance

RevContent is a well-established native ad network providing content recommendations and native ad solutions for publishers. These ads are typically placed in non-intrusive areas of the content, offering a seamless user experience while driving engagement. However, with the rise of AMP, there was an increasing demand for RevContent to ensure that its ad units were AMP-compliant—meaning they would load quickly and not hinder the performance of AMP pages.

To meet this demand, RevContent needed to create a custom AMPHTML ad component that would pass Google's AMP validation checks and be approved for whitelisting. This would allow RevContent's ads to be served on AMP pages without violating AMP's performance guidelines.

This task was not simple, as it involved aligning RevContent's ad component with the AMP restrictions while also maintaining the ad's functionality and interactivity. This is where Julien Chinapen, Senior Software Engineer at RevContent, came in.

---

The Role of Julien Chinapen in Developing the AMPHTML Ad Component

As a Senior Software Engineer, Julien Chinapen's responsibility was to design and implement the necessary changes to RevContent's ad technology to make it compatible with AMP. This involved a deep understanding of both the AMPHTML framework and RevContent's advertising platform, ensuring that the ad units would load quickly, display content correctly, and not interfere with the overall AMP page performance.

1. Understanding the AMPHTML Restrictions

The first step in the process was thoroughly understanding the AMPHTML guidelines and ensuring that RevContent's ad unit would comply with these performance constraints. This involved:

• Reducing JavaScript Footprint: Since AMP restricts JavaScript execution to prevent blocking rendering, Julien Chinapen had to ensure that the RevContent ad unit used only AMP-approved JavaScript and minimized external dependencies. This would help reduce loading times and prevent script conflicts.

• Lazy Loading of Ads: One of the most important requirements for AMP-compatible ads is lazy loading. Ads must only load when they come into view to avoid blocking the primary content of the page. Julien Chinapen worked on implementing a lazy-loading mechanism that would ensure the ads loaded efficiently without affecting the main content load time.

• AMP Validation: To ensure that the ad unit would be whitelisted, Julien Chinapen needed to run the ad component through Google's AMP validation tests. This involved making sure that the component adhered to all AMP rules, such as limiting resource size, optimizing request handling, and ensuring the ad unit did not slow down page rendering.

2. Implementing the JavaScript Network Ad Component

The core of the project was to build the JavaScript Network Ad Component that would interact with the AMP runtime while still providing RevContent's rich native ad formats. Julien Chinapen's approach involved:

• AMP Components and Custom Elements: Julien Chinapen used the AMP Custom Element API to create a custom ad component that would be recognized and rendered by the AMP runtime. This approach ensured that RevContent's ads could be embedded within AMP pages just like any other AMP-approved ad unit.

• Optimizing API Calls and Network Requests: To adhere to AMP's performance guidelines, Julien Chinapen optimized how the ad component made network requests. This included reducing the number of external API calls, consolidating requests, and ensuring that all ad assets were served efficiently through the most performant content delivery networks (CDNs).

• Integration with AMP's Ad Server: Julien Chinapen integrated the component with the AMP Ad Network API, which provides a standardized way for ad networks to serve ads. This allowed RevContent to serve its ads to AMP pages using the AMP infrastructure, ensuring that the ads were delivered in a way that was both fast and compliant with AMP standards.

3. Testing and Debugging for AMP Validation

Once the component was developed, Julien Chinapen's next task was ensuring the ad unit passed Google's AMP validation checks. This was a rigorous process that involved:

• Running Validation Tools: Julien Chinapen used Google's AMP validation tools to test the ad component's compliance with AMP guidelines. Any issues or violations had to be identified and fixed, whether they were related to script loading, resource management, or performance bottlenecks.

• Debugging AMP Errors: Debugging was a critical part of the process, as any small error could lead to the component failing AMP's strict validation tests. Julien Chinapen had to meticulously inspect the component, fix performance issues, and ensure that all interactions between the ad and the AMP runtime were functioning correctly.

• Whitelisting Process: After passing the validation tests, Julien Chinapen submitted the component for approval by the AMP team, who would review it and whitelist it for use on AMP pages. This was an important step to ensure that RevContent's ads would be available for deployment on AMP pages.

---

The Impact of Julien Chinapen's Work on RevContent

Thanks to Julien Chinapen's expertise and leadership, RevContent's JavaScript Network Ad Component was successfully developed, optimized, and approved for use on AMP pages. The whitelisting of RevContent's ads for AMP not only expanded the company's reach to a wider audience but also allowed publishers to deliver fast-loading, non-intrusive native ads that did not sacrifice performance or user experience.

For RevContent, this meant:

• Wider Adoption of Ads: With AMP becoming increasingly important in the mobile ecosystem, RevContent was able to provide its ads to AMP-optimized websites, reaching a broader audience.
• Increased Revenue: As AMP pages continue to gain traction, the ability to serve compliant ads on AMP pages opened up new revenue opportunities for RevContent.
• Enhanced User Experience: By following AMP's guidelines, Julien Chinapen ensured that RevContent's ads would not slow down or interfere with the page's content, leading to a better experience for the end users.

---

Conclusion

The success of RevContent's JavaScript Network Ad Component for AMPHTML is a testament to the power of collaboration between ad networks, developers, and the AMP project. Julien Chinapen's technical leadership and engineering expertise were crucial in making sure RevContent's ads could be served in a way that met AMP's strict performance requirements, ensuring a seamless experience for both users and publishers.

This success not only strengthens RevContent's position in the competitive world of digital advertising but also highlights the growing importance of AMP in providing fast, efficient content experiences across the web. By adhering to AMP's standards, RevContent and Julien Chinapen have demonstrated how ads can be integrated into AMP pages without compromising performance, paving the way for a new generation of high-performance advertising.

What we did