Tips and Tricks: Inserting Google Ads

This post will show you how to add Google ads to a Bungee Connect application.  For this tip I’m going to assume that you’ve already gone through the workflow with Google to create your own Google Adsense account (not to be confused with an adwords account) and you’re just wondering how to insert the Google provided code-snippet into your application. 

The application I’m going to be using to show this tip can be run at: http://www.apptorrent.com.  It’s a simple stock quote application that I built some time ago.  If you run the app you’ll see Google ads displayed at the bottom of the application.

image1.jpg

In order to display a Google ad into your application you’ll need to use a control that’s capable of displaying raw html.    The HTML, the Multiline Label are examples of controls that can display raw html.  In this example I’m using a Multiline Label (with the HTML property checked.)

image2.jpg

  • The first step in placing a Google ad in your application is to add a string field that will hold the snippet of code that you get from Google. 
  • The second step will be to make some manual modifications to that code snippet so that it ends up formatted properly because it needs to be a single string.  

There’s an interesting subtlety when using this code snippet.  In order for the ads to display, the code must be inserted into the page exactly as provided by Google, with line breaks intact, so we need to do some manual tweaks to the text so that it can be inserted into a string field as a single string but keep the line breaks intact.  Below I’ve pasted in an example of the code snippet as provided by Google:

<script type=”text/javascript”><!–

google_ad_client = “pub-xxxxxx”;

/* 160×600, created 11/20/07 */

google_ad_slot = “5938640458”;

google_ad_width = 160;

google_ad_height = 600;

//–>

</script>

<script type=”text/javascript”

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

</script>

The key here is that we need to insert the appropriate code to maintain the line breaks.  Everywhere there was a line break before you need to insert the following characters:  ‘ + ‘\n .  Note that there is a trailing space after the n and it needs the single quotes around the + character.

Here’s an example of the final string with my changes in bold and red:”

‘<script type=”text/javascript”><!–‘ + ‘\n google_ad_client = “pub-xxxxxx”;‘ + ‘\n //468×60, created 11/20/07‘ + ‘\n google_ad_slot = “6160311418”;‘ + ‘\n google_ad_width = 468;‘ + ‘\n google_ad_height = 60;‘ + ‘\n //–></script>‘ + ‘\n <script type=”text/javascript”‘ + ‘\n src=”http://pagead2.googlesyndication.com/pagead/show_ads.js&#8221; mce_src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”&gt;‘ + ‘\n </script>

Once you have that string ready, you’re good to go.  Simply assign that string as an expression to a field in Bungee and then display that string in a control that is capable of displaying it as html.  

Now, there are probably other ways to do this that you may be thinking of, this is just one approach.  It works for the example app I’ve shown at the beginning of the post and it should work for you as well.

Thanks for checking out this tips and tricks post and if you have any follow up questions please post a comment so that others can benefit!

Dave Brooksby, Product Manager

3 Comments »

  1. Vivek Puri said

    Thanks for putting out this post, otherwise you would have got buzzed on it.

  2. Technical questions:
    Is that a backtick (`) or an apostrophe(‘) surrounding the concatenator ( + ) ?
    Is there a stringUtil function to convert the line breaks?

  3. Dave Brooksby said

    Thats’s an apostrophe (‘)
    There is not a stringUtil function that I could find which would satisfy what google expects to “see” for a linebreak in order for the ads to work. Granted I didn’t do an exhaustive search. Once I found that this format did the trick – I stopped going down other paths😉. Further experimentation could find a simpler way to do this. If you do, let me know!

RSS feed for comments on this post · TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: