Please Note: This is an advanced feature. Implementing Google Ads on your website will require some technical skill on your part or time with a paid consultant. Additional details below.

What does "advanced feature" mean?

When we say advanced, we're referring to the fact that users will need some basic HTML knowledge. If you're not afraid to dive into the page's source code or add a line or two of CSS, you should be fine. Just take your time working through this documentation.

Is Your Site Set Up For Google Ads?

Check out this article for more information on getting your site ready for Google Ads.

The embed code

Going back to the code you generate from Google Ads, it will look something like this:

<!-- Homepage-728x90-Footer -->
<div id="div-gpt-ad-XXXXXX-X">
    <script>
        googletag.cmd.push(function() { googletag.display('div-gpt-ad-XXXXXX-X'); });
    </script>
</div>

NOTE: The id="div-gpt-ad-XXXXXX-X" will be unique to your site.

To embed on your site, go to the section you'd like to embed the ad and click in the content region and click Tools > Source Code

Next, paste the unedited code from Google Ads into this section and click OK then Save

Background on Javascript Rendering

Google Ads Manager generates code snippets that you will need to embed into your site. These snippets contain Javsacript. Given the way Javascript works, you must take special care when editing the content regions where you add the code.

JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. - Mozilla

The Javascript code snippet could consist of a single line when you add it to your site. Once it renders on the page, it could be 100s of lines of code after it runs. Once you placing the code into the module, we highly recommend not editing that code. Editing the code can cause the embed to break and it will no longer work as expected.

Even something seemingly as simple as centering the ad may break the code block.

A Novi Admin is able to lock down specific text regions on your site. Please just reach out to us in Intercom with a list of URLs and sections that you'd like locked. Once locked, no one on your team will be able to edit the code block itself without first reaching out to our support team.

So... How Do I Add Styles to an Embedded Ad If Doing So May Break It?

Don't worry you advanced user - you got this!

In Chrome, using the inspector, select the div that is containing the ad block you'd like to style.

In this case, the div is the class called .footer-cms-region. Copy this div name and then we will head into the admin section of the website.

In Association Settings > Analytics/Scripts find the Styles section.

In this section you are able to add styles that will run site wide. More information on this section can be found here.

In this section, you can paste in the class of the ad container and add styles that can center the content.

CSS Tips:

id="id-name" will be #id-name

class="class-name" will be .class-name

Padding can give the ad some breathing room.
text-align: center; and margin: 0 auto; are usually two styles that will get your content center.

My Ad Is In A Content Section That Will Need To Be Edited

No worries! This adds complexity but is doable.

We recommend saving your code as a separate HTML file with the pre-rendered Ad Code Javascript.

Then using the code editor of your choice, make any content edits in the separate HTML file. Once complete, drop the updated code back into the editor.

Remember, if you copy and paste after you save your content on the site, the Javascript will have rendered and may not work properly.

Troubleshooting Common Issues

There is a lot of whitespace above the ad I just embedded.

We've found this is caused by making an edit to that section after the Javascript has rendered causing a duplicate iframe to show up. To fix this, we recommend taking the original (non-rendered) Google Ad code and re-dropping it into this section.

Need More Help?

Please note that we are not experts in Google Ad Manager. Given that it is a third-party tool, we are limited in the support that we can provide. If you need help implementing Google Ads, we strongly recommend that you hire an outside consultant who specializes in the area.

If you would like Novi's help stying your website's pages to accept Google Ads, we would be happy to provide an estimate for the custom design time you may need.