AdsBridge is all-in-one advanced tracking software

Create a Mobile Optimized Landing Page

jquery mobile featured
Over the past year or so the focus of a lot of affiliate marketers has been drawn towards mobile marketing. It seems that OfferVault is having a new webinar every other week on different aspects of mobile marketing, but what a lot of people do not understand is that it is not as easy as simply signing up at AdMob or InMobi and pushing 10,000 clicks to your favorite e-mail submit. That simply does not convert. Instead, a better option is to create your own mobile optimized landing page and pushing traffic to the offer through that. This gives you more options and control over what your visitor is seeing. I have found that the best and easiest way to do this is to create a page using jQuery Mobile.

jQuery Mobile

With jQuery Mobile it is easy for anyone to create a mobile optimized page.  The framework for this is built on top of jQuery, which is a very popular javascript library and gets a ton of support from large companies (Google, Dell, Bank of America, MLB.com, etc). So, how can you implement this into your affiliate marketing efforts? I have tested two different methods. With the first, I simply created a jQuery Mobile page that featured a title (ex: Win an iPad!), a banner in the main content area explaining to the user how they could win an iPad, and then a call to action button. The other method I used was to simply create a form and captured the user’s e-mail. Forms are pretty easy to put together with jQuery Mobile and they look great. Check out their demo for more information.

Basic jQuery Mobile Template

<!DOCTYPE html>
<html>
	<head>
	<title>Page Title</title>
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>Page content goes here.</p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>
This is the basic template HTML code for each page you create. It will look like this on an iPhone and similar mobile devices. jQueryMobile Template screenshot

Be Creative!

We have had thousands of publishers sign up at PeerFly who are pushing traffic through mobile ad networks. We have found our e-mail and zip submit offers seem to do best with this type of traffic, but it’s important that you be creative when promoting them. Simply direct linking does not profit, so you will need to test different mobile optimized landing pages to see what does. Please let me know if you have any questions.

13 Responses to “Create a Mobile Optimized Landing Page”

  1. It looks really interesting an I have been thinking about doing this for quite a while. The only problem for me is that I don’t have a good phone so I can’t really test my mobile websites.

    I’m also a bit curious about one thing. Let’s say that you set up a mobile landing page and send traffic to it. Now if someone clicks though and goes to the CPA offer, will that page also be optimized for mobiles? Because it would be a waste of time if you sent your traffic to a website that didn’t work well with mobiles.

      • Luke -

      It does make it more difficult to test out what your landing pages will look like if you don’t have a smartphone, but there are some tools out there to help you. There are extensions for Firefox and Chrome that can fake the user agent so you can see what the page would look like. Also, OfferMobi has some tools that do the same:
      http://www.offermobi.com/page/tools/

      No, the actual offer will still not be mobile optimized, but if you presell the offer well enough in your mobile optimized lander, you still should see an increase in your conversion rate (compared to just directly linking to the original lander). It’s important that you still find an offer that will work well with mobile traffic.

  2. Release Candidate 2 is now released for jQuery Mobile.
    I have been learning this for about a month since I first discovered it.
    I have Dreamweaver 5.5 which is already tied into the jQuery Mobile stuff, as a matter of fact, one of Dreamweaver’s employees spearheaded the Themeroller that is meant for use in jQuery Mobile.
    Here are a couple of examples:
    http://dorseyservices.mobi
    http://xsqr.com/gotbugs/

      • Luke -

      Very cool! Thanks for the info. I am going to be doing a post this week about the new jQueryMobile ThemeRoller :)

  3. Hi Luke,

    Great post.

    Which of the 2 methods you describe (i.e. using a banner or an email capture form) worked the best in terms of conversions?

    Also, when using the email capture, did this then feed through to pre-populate the offer conversion page?

    THanks

  4. Love this post! I am already setting up mobile pages for Lead generation using some of this code & CSS themes created by the jQuery Themeroller! Thanks again luke, you rock! :D

Leave a Reply