If your content ads or sidebar ad have gone missing (or never showed up in the first place), and your site is a single-page application (SPA) or styled with flexbox, grid, or a utility-first framework like Tailwind CSS, this is probably why.
Our script wrapper finds unique classes and IDs in your theme's HTML to identify your main content area and sidebar, then places ads accordingly. Modern JS frameworks and CSS methodologies tend to get in the way of that:
- SPAs re-render content on the client and swap DOM on route changes, so there's often nothing tying a container to "this is the post content" except position — and position isn't reliable.
- Flexbox and grid layouts tend to produce deeply nested wrapper divs with no unique or semantic naming at any level, leaving our script with nothing to reliably grab onto.
- Tailwind (and similar utility-class frameworks) generates classes that describe style, not meaning — the same utility classes repeat across your content, sidebar, header, and footer, so there's no unique marker for the script to lock onto.
The fix is the same in all three cases: give the content and sidebar containers a unique, semantic class or ID.
The fix: add your own unique, semantic class or ID
The good news is you don't need to redo your layout or give up on your framework of choice. You just need to give the script one clear, unique landmark for the main content container and one for the sidebar container.
We support (and prefer) the following:
- journey-content for the main content wrapper
- journey-sidebar for the sidebar wrapper
Add one of these as a class or an ID on the container that wraps your post content, and the other on the container that wraps your sidebar. For example:
<div id="journey-content">
<!-- your post content goes here -->
</div>
<aside id="journey-sidebar">
<!-- your sidebar widgets go here -->
</aside>or, as classes:
<div class="journey-content flex flex-col gap-4">
...
</div>Tailwind (or any other utility classes) can absolutely stay right where they are — journey-content and journey-sidebar just need to ride along on the same element.
A few important notes:
- Apply it once, on the main container. Journey uses a single content selector, so journey-content should live on the outermost element that wraps your entire post body — not on a child element nested somewhere inside it, and not repeated across multiple different containers on the same page.
- Keep it unique. Don't reuse journey-content or journey-sidebar anywhere else on the page (footers, related-post widgets, etc.). If the class or ID shows up more than once, the script can't tell which instance is the real one.
- Your sidebar still needs to meet our size requirements. It should be at least 300px wide (excluding padding) and visible on desktop screen widths up to at least 1280px. A journey-sidebar container that's hidden or too narrow won't be able to hold the sidebar ad.
After you make the change
Once journey-content and journey-sidebar are in place, fill out our recrawl request form so we can re-scan your site and pick up the new markup. If your site uses caching, please clear all caches first.
You can also add ?test=placeholders to the end of any URL to force placeholder ads to load — if you see placeholder ads in both your content and sidebar, your targeting is good to go.
Pro tip
If you're working with a developer or theme author, send them this article before the build starts. It's a lot easier to bake journey-content and journey-sidebar into a component from the start than to retrofit them after launch.