iPhone Microsites - Target content to iPhone visitors

Target Content to iPhone Visitors

Posted: Jun 15, 2008 in Home > Tutorials

With the numbers of users visiting your website from an iPhone/iPod touch growing each day, opportunities to show these visitors targeted content are becoming increasingly valuable. The message can be as simple as a special offer shown only to these users, a customized welcome message or even a complete version of your website created especially for these visitors. This tutorial will outline a simple procedure to create a welcome message which will be displayed whenever a user visits your site from one of these devices.

If you visit Amazon from an iPhone you will notice a message presented informing you of their iPhone microsite and providing a hyperlink to visit. This allows the user the option of an iPhone-optimized or regular version of your website in a fairly non-intrusive manner, and easily provides freedom to choose which version of your website is best suited for their needs.

Our example will accomplish this by creating an empty <div> element on your website to display the message, and writing a function which checks for the iPhone/iPod touch and populates the container with your desired content. In the case of an iPhone you can display a link to your iPhone microsite, while another offer can be displayed in this area to visitors using a desktop browser.

Step 1
Place the div element on your main webpage in the location where you want this content to appear, and give it an id which is used to target your content into this container.

<div id="theContainer"></div>

Step 2
We create a function called checkClient to check for the iPhone/iPod Touch user agent, and populate the div element based on the results. Here’s the script:

<script type="text/javascript">
function checkClient(){
	if((navigator.userAgent.match(/iPhone/i))||
           (navigator.userAgent.match(/iPod/i))){
	document.getElementById('theContainer').innerHTML="<h1 style='text-align:center;border: 1px solid #999999; -webkit-border-radius: 8px;'>Message for iPhone visitors goes here</h1>";
	}else{
	document.getElementById('theContainer').innerHTML="<h1 style='text-align:center;border: 1px solid #999999; -webkit-border-radius: 8px;'>Message for non-iPhone visitors goes here</h1>";
	}
}
</script>
<NOSCRIPT>your browser does not support javascript</NOSCRIPT>

Step 3
Call the checkClient() function by assigning it to an onload event handler in the body tag.

<body onLoad="checkClient();">

Inline styles are applied for the sake of simplicity of the example. We recommend moving all style declarations to an iPhone specific style sheet. See this article if you would like more information on declaring separate css for the iPhone or this one for a practical example using media query.

This tutorial could be further extended to display rotating promotional messages, or store the user preference in a cookie for future visits, it’s up to you.

Targeted content is one of many ways we can enhance the user experience of your website by presenting optimized content to iPhone/iPod touch visitors. We hope you have found this information useful.

A zip of the complete html file can be found here. Let us know what you think.

-Shaun Mackey

Submit this page to other blogs:

These icons link to social bookmarking sites where readers can share and discover new web pages.