Blog

Injecting Ads into the Jetpack Carousel

on • 3 Comments

This is really neat!

Kind words from WordPress.com VIP‘s rock star team after deploying our new ad integration extension to Jetpack’s Carousel. Built for 9to5mac.com, this extension appends a custom image to the full screen carousel modal. We’re excited to share it with the WordPress community, along with a few cautions and insights.

Rules are rules: no AdSense

If you were hoping to inject AdSense ads, we’re sorry to disappoint: AdSense policies clearly stipulate that an ad may not be “Displayed in pop-ups or pop-unders.” You may, of course, be able to leverage our approach for other, more forgiving ad networks. We envision the typical use case will involve an internal “house” ad image.

Hooking into Jetpack with JavaScript

Because the modal Jetpack Carousel is generated entirely by JavaScript, classic WordPress PHP API hooks do not apply. Fortunately, JetPack provides 2 JavaScript hooks: jp_carousel.afterOpen and jp_carousel.beforeClose. We hooked into afterOpen – which fires every time the carousel is generated – on line 14 of carousel-ads.js:

$( document.body ).on( 'jp_carousel.afterOpen', SELF.insertAd );

Read More on Injecting Ads into the Jetpack Carousel

Avatar photo

on

Living just outside of Seattle, I’m proud to share that 10up will be sponsoring and speaking at WordCamp Seattle on June 8. Featuring three tracks, the conference offers focused content for WordPress bloggers, designers, and developers.

Jeremy Felt and I will be joining Kailey Lampert in presenting lightening talks on the topic of WordPress Coding Done Right, followed by some Q&A. Eric Mann will be covering Automated WordPress Development, which reviews best practices for CSS and JavaScript and the use of Grunt to automate preparation of a theme or plugin for release.

Senior Web Strategist Josh Cunnigham, another Seattle local, will also be in attendance. If you’re planning to show up, be sure to say hello to the 10up contingent!