Streaming live at 10am (PST)

Using Webflow to create Google Banner Ads

Hello, I am tasked with creating mobile banner ads for my company (new project), the dimensions are 350x50. Here is the link to my project;

https://preview.webflow.com/preview/bafk-ads?utm_medium=preview_link&utm_source=dashboard&utm_content=bafk-ads&preview=3ee041d7a1dee6f4ff557e35999d37b8&mode=preview

I assumed I could just make it in Webflow then export the zip into Google’s Ad Network, however, I am running into 5 specific issues. I was wondering if anyone here with coding experience or Google Ad Network experience could help me troubleshoot these, as I am, for lack of a better term, codeless.

Here are the 5 issues I am running into;

  1. Your HTML5 ad is missing a primary .HTML file. Primary .HTML files include an Ad Size tag such as . Make sure there is an .HTML file with an ad size tag in your HTML5 ad, and try again. Learn more

I tried to fix this one myself by adding “” between the headers but If I compress everything again and try to upload it still shows that error. Not sure what to do.

  1. The ad you uploaded contains HTML5 code that we can not allow in our ads: cc:work. Please make sure your ad meets our policy requirements, and remove any references to the tags above.

  2. Learn moreYour HTML5 ad is trying to reference an asset that we can not find in your .ZIP file: icons/favicon.ico. Make sure you have included all of your assets in the .ZIP file and that all file references do not have any typos. Once you have made the changes, try again. Learn more

  3. Your HTML5 ad is trying to reference an asset that is external to your .ZIP file: https://uploads-ssl.webflow.com/5c16f3698f6920f8fef83bd4/5d43278e2a20968b9b3b3c68_BAFK-Jesus.svg. Only internal file references are allowed (for example, “path/to/asset/in-zip.png”). Make sure you have included all of your assets in the .ZIP file and that all file references are internal. Once you have made the changes, try again.

  4. Learn moreYour HTML5 ad is trying to reference an asset that is external to your .ZIP file: https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js. Only internal file references are allowed (for example, “path/to/asset/in-zip.png”). Make sure you have included all of your assets in the .ZIP file and that all file references are internal. Once you have made the changes, try again. Learn more

Any help regarding any of this would be huge for me, thank you!

I don’t think you need any head code so try removing this and the html tag too. As far as I know all you need is the code between the <body> tags.

See this post and look at the code it does not have any head or html tags.

https://codepen.io/kubasanitrak/post/html5-banner-with-google-adwords-approval

This will fix #3 and maybe #2

#4. Why not just add the raw SVG code in there?

Ok so I found solutions to all of my problems, I will list them all out in detail for anyone else with similar projects.

  1. So the problem I ran into first was not having that code at all in the index.html file. So I just copied and pasted it into the html file and changed the dimensions to the proper mobile ad dimensions 320x50. However, when I tested it again it gave the the same error. After a lot of digging and testing I found out that you should not copy and paste that code as that could create (and did in my case) problems. So the solution I found was just to type it out myself in between the headers. This way there was no copy/paste errors.

  2. After looking at the HTML,CSS, and JS code to find “cc:work” I thought it may be an issue with the actual .SVG code. So I opened up my SVGs in my code editor and I was right. This is an issue with the SVG for the Google button from their actual respiratory (IRONIC), so I needed to replace with a proper SVG. I found this SVG compressor that also cleaned it up. https://jakearchibald.github.io/svgomg/ , I just threw in the Google SVG and it fixed it right up.

  3. Just deleted the reference in the index.html

  4. Just brought in the SVG in the images folder and it worked.

  5. Ok I figured out the JQuery problem. Google doesn’t let you reference outside JQuery files. So the first thing I thought of was to Download Webflow’s JQuery and put it in the js folder inside my zip. This did not work. Later on, I figured out that Google Hosts its own JQuery that you are allowed to reference so I just replaced Webflow’s JQuery with Google’s inside of the index.html, you can find Google’s libraries here
    https://developers.google.com/speed/libraries/

If you have any questions feel free to @me and I will try to respond. I will also try to get around to making a video tutorial sometime soon.

2 Likes