Adding Google AdSense Ads to a Morfik Application
From Morfikwiki.com
Contents |
[edit] Introduction
Google AdSense is a service which provides advertisement for insertion into any web page, based on the content that the service perceives to be associated with the website. This service had opened the doors for many websites, which have significant traffic but which would otherwise be considered as being insignificant by large media and advertisement companies, to generate revenue from its visitors.
[edit] Getting Started
If you do not yet have an account with Google AdSense, you can quickly get one directly from the Google website where at the bottom of the page a link to “Advertising Programs” can be found. For the purposes of this paper we will only concern ourselves with the AdSense program which is the one which allows the embedding of ads within your website.
If you do not have an AdSense account, you will need to create one to properly implement what is described in this paper.
[edit] Google AdSense HTML Code
Once you have created an AdSense account you will be able to, through the management interface for the program you will be able to create the layouts you want for your ads. This topic considers the use of the “468x60 Banner” format, but any format can be used. Once you have created the ad, the HTML source code for it is made available for inclusion in your website.
In order to properly come into the XApp, occupying precisely the space set aside for it, we must add a couple of elements of our own to the HTML source. The following is the code provided by Google:
<script type="text/javascript"><!--
google_ad_client = "pub-4374970016542174";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text";
google_ad_channel = "";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
To this code we must add two enveloping elements: a div and a body, to add formatting attributes which will make sure no additional space, beyond the ad text gets added to the website. With these additions the code will look as shown in the following snippet.
<body style="margin:0pt;padding:0pt">
<div class='adsense' style='text-align:center; padding:0px; margin:0px'>
<script type="text/javascript"><!--
google_ad_client="pub-4374970016542174";
google_ad_width=468;
google_ad_height=60;
google_ad_format="468x60_as";
google_ad_type="text";
google_color_border="EEEECC";
google_color_bg="EEEECC";
google_color_link="333333";
google_color_url="333333";
google_color_text="558866";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</body>
Without these small additions, when we insert the ad into the Morfik XApp it will have additional space around it and will cause scrollbars to appear around itself. It is very important to note that the code generated by Google is not being altered at all, which would be against Google's AdSense terms of use. We are adding formatting commands around it just to eliminate the possibility of unwanted blank space to be included by the browser.
[edit] Bringing the ad into a Morfik Web Application Project
Once the original code from Google has been extended to ensure no unwanted extra spacing will exist, it should be added to a Morfik Web Application project as a resource in the resource repository. In this case the file will be saved as “ad.html” and should thus be referenced in source code. A new project with a single Form can be created for purposes of testing.
In the Form where the ad is to be displayed a SubForm control, with the same dimensions as the desired ad size, should be created. In this case the SubForm will have a height of 60 and a width of 468. This SubForm should be visually positioned where the ad is to be displayed.
In order complete the process and have the ads appear inside the application, a small code snippet should be added to the OnReady event of the Form where the ad is to be displayed. The following code snippet will tell the browser to request the code for the ad, from the same Server from which your application is being loaded.
Procedure Index.WebFormReady(Var Ready: Boolean);
Var
url: string;
Begin
url := 'http://'+window.location.host;
OpenForm(url+'/ad.html?cls=res','Index:SubForm1','');
End;
With this code snippet in place the application will display the Google AdSense ads in the appropriate place. The following picture is a screenshot of a Morfik XApp, running within Internet Explorer 7, from which the code in this topic was obtained.
Notice that he ad comes into the Form perfectly, fitting exactly to the size of the pre-positioned SubForm.
[edit] Bringing the ad into a Morfik Browser Application Project
In Morfik Browser Application projects the adapted HTML code file from Google does not need to be added to resource repository. In these applications you have to make sure that the file is in an accessible folder/directory so that the XApp can request it. The following code snippet shows the slight change to the code which is necessary to make the application work properly from any web server the developer may wish to use.
Procedure Index.WebFormReady(Var Ready: Boolean);
var
url: string;
Begin
url := 'http://'+window.location.host;
openform(url+'/ad.html','Index:SubForm1','');
End;
Notice that in the case of Morfik Browser Application projects the URL for the ad file is actually a little bit simpler than in the previous example.
[edit] Conclusion
It is a simple task to bring Google AdSense ads to a Morfik website or application, once an account has been setup with Google.
