Composr Supplementary: Setting up Google Ads in Composr

Written by Steve Jarvis and Chris Graham, Sponsored by Arvixe hosting

Advertising can be an important part of any website. This could be selling advertising space such as classified ads. Composr also supports banner advertisements which you could sell adverts in and through this tutorial I want to go through the process of setting up Google AdSense without Composr's own banners system.

Google AdSense are adverts which tailor to the content on the page. I am sure everyone has seen them; they are a number of text based adverts which appear on many websites. These adverts are taken from users who have set up an Adwords account to advertise their website and have ticked (checked) the option to display their advert on the display network as well as next to search results.

The first thing you need to do to be able to set up your AdSense adverts is follow through Google's process to create an account.

Once you have completed the form you have to wait until your application is accepted. Assuming your application is accepted, you will need to set up your AdSense ads. There is a bit of a catch 22 with AdSense for a brand new site as they won't accept an account until there is some proper content and your site is fully built. This means you may have to use a place holder for a while or leave some blank space where the AdSense ads will go until you have been accepted.

If you haven't used this before I recommend running through Google AdSense academy which can be found here: https://support.google…-ads/answer/7539883?hl=en

If you want to replace the existing banners with AdSense banners in the header you need to set Google AdSense to 728×90 or you will need to edit the styling to make the banners fit.

If you are going to place the banners in the panel_left or panel_right, the width and height will depend on the size you have set your panels to be. If you have not changed the styling then 200px wide should fit fine.

Once you have set up your adverts Google will provide you with the necessary code to place on your site to make the ads appear. It will look something like this:

Code (`HTML`)

<div class="adsense_banner" style="text-align: {!en_right}">

<script type="text/javascript"><!--

google_ad_client = &ldquo;ca-pub-xxxxxxxx";

/* test */

google_ad_slot = &ldquo;xxxxxxxxx";

google_ad_width = 200;

google_ad_height = 400;

//-->

</script>

<script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

</div>

The div class adsense_banner I have added myself as this will allow me to add CSS styles to the global.css to help position the ads where I want them.

To place the code on a page edit the page to put it on and paste it in between Comcode [html]...[/html] tags (or within the WYSIWYG editor's source view).

To place the code in a template edit the template and paste in the code. To replace the default banner slot that would be the GLOBAL_HTML_WRAP.tpl template and you would replace this bit of code:

Code (`HTML`)

{$,The banner}

{+START,IF,{$NOT,{$MOBILE}}}

        {$SET,BANNER,{$BANNER}} {$,This is to avoid evaluating the banner twice}

        {+START,IF_NON_EMPTY,{$GET,BANNER}}

                <div class="global_banner">{$GET,BANNER}</div>

        {+END}

{+END}

Feedback

Please rate this tutorial:

Have a suggestion? Report an issue on the tracker.

Composr Supplementary: Setting up Google Ads in Composr

Code (HTML)

Code (HTML)

Feedback

Code (`HTML`)

Code (`HTML`)