GWD dynamic ad firefox click issue

[Gezmins 2 Likes (Newbie)]

Hi,
I have a problem and don't understand what to do. I created Html5 dynamic banner from Google web designer template and uploaded to Google Ads. So the problem is that in Firefox click url is not working. Other browsers works fine. In Firefox console when I click ad they show me this. Maybe someone know how to solve this problem? Also I changed transform-style: preserve-3d; to "flat", but don't solved problem.

[Jonathan 5,176 Likes (Superhero)]

Hello @Gezmins and Welcome to the GreenSock forum!

 

Usually that happens due to a stacking context issue. Are you sure that it is not related to this Firefox bug report?

 

https://bugzilla.mozilla.org/show_bug.cgi?id=729625

 

Sometimes you can add transform: translateZ(0px) to your hit area to resolve this so it gains a new stacking context so its clickable. And / or even adding transform-style: flat to the .gwd-page-content selector.

 

But do you have any of your html and css code to post for context?

 

Happy Tweening!

[Gezmins 2 Likes (Newbie)]

Hi Jonathan! Thanks for your answer. I will try it  But for more context I upload GWD file, where is problem. And firefox console screenshot with all information. Like I understand banner is clicking, but nothing happening. 

firefox problem.zip

[Jonathan 5,176 Likes (Superhero)]

HI again @Gezmins,

 

I don't really use Google Web Designer but I have seen this sort of thing before.

 

So what it looks like is happening is that .gwd-page-content has a transform with matrix3d() and perspective() which gives it a higher stacking context than your gwd-taparea. Some have solved this Firefox bug, by adding transform-style: flat on the .gwd-page-content element. But then I'm not sure if that will fully adjust the stacking context since transform-style flat will fallback to transform 2D and not transform 3D.

 

Also keep in mind that when you use position absolute you should always specify your z-index so you tell the browser how to stack those absolutely positioned elements. I think that is another reason why the stacking context is not stacking right since z-index default is auto which can be a wild west scenario with inconsistent render results. I believe the lack of z-index and other things is causing Firefox to get confused on the stacking context.

 

I would make sure that your gwd-taparea element has a higher z-index than the #background and #footer-ctn. If your element does not need absolute position then just use position relative which will allow you use z-index and so your element stays in the flow of the document.

 

What happens if you add the following CSS to your gwd-taparea so it gives it a new stacking context?

 

gwd-taparea.gwd-taparea-1uz5 {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
}

 

Happy Tweening

[Gezmins 2 Likes (Newbie)]

This is totally pain... I writed that code and gived z-index order for background, footer and gwd-taparea. But still result is the same. 

When I open file just in firefox browser and clicking don't get errors. Problems starting when I upload into Google Ads. 

[Gezmins 2 Likes (Newbie)]

Quick update. Looks like problem isn't in banner code. This is information what I get from GWD support team. Hope this helps if someone will have the same problem.
 

After extensively checking your creatives in Firefox and Chrome browsers, we’ve determined that the clickthrough events are firing properly and that the issue seems to be with the GoogleAds API.

Here are the browser versions we tested it on (Mac OS 10.14.5):

•  Chrome Version 74.0.3729.169
•  Firefox Version 67.0

And here are our findings for both browsers:

• Local preview shows that the exit event (clickthrough) are firing properly on Chrome. Here is what it shows on the Chrome’s built in debugging tools: Exit "Product_0_url" invoked
• Likewise, the exit event (clickthrough) are also being invoked properly on Firefox.  Built-in debugging console in Firefox also shows a similar result: Exit "Product_0_url" invoked.

We also examined the creative attached on this email thread and confirmed that you already implemented the fix for clickthroughs not working in FireFox, as suggested by my colleague Michael.

With that being said, we’ve determined that the issue is most likely with Google Ads platform and not the actual creative. As much as we would like to troubleshoot this further, the best team to address this issue is Google Ads Support. For further assistance please contact them through this link: Google Ads Support