Official Blog

Injecting Ads into the Jetpack Carousel

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 );