Google Ad Manager and Turbo Drive (without throttling)?

1

Hi there. I built a Wordpress theme using Turbo Drive - so that I can have a persistent audio stream playing across all “pages.” (It’s a radio station site.) It works really well.

But I’m also using Google Ad Manager (GPT) to traffic sponsor ads on the site. In order to get the ads to change from “page” to “page,” I added a turbo:load event listener, and put googletag.pubads().refresh() inside it. That works too.

BUT - Ad Manager is throttling the ads when you click from page to page, because it thinks I’m violating its policy by refreshing ads more frequently than 30 seconds.

Does anyone have experience with using Turbo Drive and GPT? How do I set this up so that Ad Manager considers this refresh to be a new page?

I’m very grateful to whomever has wisdom to share here!

2

Just updating this because I figured out a workaround. Maybe somebody else will encounter this. Basically, the key is to put all the Google Ad Manager code inline, in the body, including loading the Google Ad Manager script — and add a turbo:before-fetch-request event listener with googletag.destroySlots();, the adds will refresh with each Turbo visit, and they won’t get throttled. I know this isn’t the most performant way to load ads - but the ads load after the rest of the page. The page itself still loads fast (load the script “async”).

2 Likes
3

Hi, @mack-linebaugh

Could you share an idea how you managed to achieve “persistent audio stream playing across all “pages.””. I need similar functionality with video stream, but i’m stuck in that after clicking any links Turbo Drive replaces the current <body> element which interrupt video stream.
Currently I switched to turbo-frames to solved this issue, but I would like to know if its possible to achieve it with Turbo Drive.

Thanks,

4

You could try replacing the default renderer with something like morphdom. There is an article about it here: Make hotwired/turbo patch vs replace - DEV Community
It should let you persist unchanged elements between requests.

I’m pretty sure something like this would also work:

import morphdom from "morphdom"

addEventListener("turbo:before-render", ({ detail }) => {
  detail.render = morphdom
})

Alternatively adding the turbo-permanent attribute to your video element should have a similar effect