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.
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.)
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:
google_ad_client = “pub-xxxxxx”;
/* 160×600, created 11/20/07 */
google_ad_slot = “5938640458”;
google_ad_width = 160;
google_ad_height = 600;
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:”
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