QwikDev/partytown

[🐞] Google Publisher Tag does not work

Opened this issue · 4 comments

burakbasbug commented

Describe the bug

In our platform we want to run Google Publisher Tag in Partytown context and it does not work. Below I provided a reproduction URL with minimal setup. The GPT ad can be found on the element with #banner-ad id.

Reproduction

https://github.com/burakbasbug/qwik-gpt-bug-reproduction

Steps to reproduce

You can use setup guidelines of Qwik + Partytown + GPT docs for reproduction:

  1. create a new qwik project npm create qwik@latest
  2. add partytown to the project npm run qwik add partytown
  3. add <QwikPartytown /> component
  4. add forwarding attribute for googletag: forward={['googletag.cmd.push']}
  5. add reverse proxy as in partytown docs
  6. add google publisher tag: you can use this generic-ad example: https://developers.google.com/publisher-tag/guides/get-started#generic-ad

Browser Info

Chrome, Safari, Firefox

Additional Information

No response

github-actions commented

Partytown moves to QwikDev organization, this is a new beginning for the project. So it's time to clarify the status and clean up the current state a bit. This issue was automatically marked as deprecated and closed because it was not detected recent activity for 8 months, date of latest version. If this issue is still relevant, feel free to comment below and the maintainers will reopen it. Thank you for your contributions.

rmertens commented

Still relevant for us.

finalgamer commented

@rmertens We have found the reason and a possible solution to the problem. However we decided it was too finicky to implement in production.

The Solution

The SafeFrame specification uses the "name" attribute on the iframe to set the configuration of the SafeFrame which contains the version number and content length of the srcdoc. To correctly proxy this behavior, we need to forward the "window.name" property to the main window. This can be done by settings the partytown config option mainWindowAccessors to ['name'].

Next the SafeFrame performs a check on the window.hostname to make sure it was loaded on the correct domain.
In case of GPT the hostname needs to match one of these patterns:

/^([a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?\.safeframe\.googlesyndication\.com|tpc\.googlesyndication\.com|secureframe\.doubleclick\.net|[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?\.safeframe\.usercontent\.goog)$/

or

/^(pagead2\.googlesyndication\.com|googleads\.g\.doubleclick\.net)$/

These patterns can be found when /safeframe/1-0-40/html/container.html is loaded.

To bypass this the proxy needs to update the regex to also match localhost.
We have done this like so:

content = content.replaceAll(
    "/^([a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?\\.safeframe\\.googlesyndication\\.com|tpc\\.googlesyndication\\.com|secureframe\\.doubleclick\\.net|[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?\\.safeframe\\.usercontent\\.goog)$/",
    "/^([a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?\\.safeframe\\.googlesyndication\\.com|tpc\\.googlesyndication\\.com|secureframe\\.doubleclick\\.net|[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?\\.safeframe\\.usercontent\\.goog|localhost)$/",
);

With these changes the SafeFrame will be able to load correctly and the ad will be displayed.