Mobile Users: Redirect to a different page when they click on a link

I have an affiliate website and am having problems sending mobile users to the right page on the merchants website.

When a mobile user clicks on the standard affiliate link it doesnt work. I need to provide mobile users with a different URL (.mobi).

Currently I have my mobile setup using WP touch pro (a mobile plugin) but my theme also has responsive design.

I currently have a gateway page, in wordpress, that appears after a user clicks on the 'buy' link where they choose their country location (to send them to the right external webpage), before going to the merchants site.

Is it possible to either send the mobile user to a different page when they click on the 'buy' link (e.g. Gateway page 2)?

or

Use the same gateway page to send users to a different external URL depending if they are a mobile user or not?

I really appreciate your help!

  • Hakan
    • The Incredible Smush

    Hi itsallwhite,

    I assume that jQuery is already loaded on the page. If not, call it inside functions.php of the theme using wp_enqueue_script function:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    Add this snippet inside the template to the location where link will be displayed:

    <a href="javascript:void(0)" class="link-for-mobile">Click for mobile</a>
    <script type="text/javascript">
    jQuery(document).ready(function($){
    	var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
    	$('.link-for-mobile').click(function() {
    		if (isMobile){window.location.href = 'http://example.com';}
    	});
    });
    </script>

    Cheers,
    Hakan

  • itsallwhite
    • WPMU DEV Initiate

    Thanks for your reply, however I am not exactly sure how to use the code you gave.

    The page is http://www.cleansingmatters.com/buy/

    The main links are linked to from an image.

    When the user clicks on the image link I would like them to go to link A if they are a regular user and link b if they are a mobile user.

    Could you explain how I could do this/use this code to to this? I did try, sorry if its me being simple!

    Thanks again for your help.

    Tom

  • Hakan
    • The Incredible Smush

    Hi Tom,

    You didn't tell that you have 3 different links. So you have to distinguish which link is clicked.

    Currently you have this html code:

    <a href="http://www.cleansingmatters.com/isagenixusa">
    <img src="/images/usa1.gif" alt="" width="180" height="163" />
    </a>
    <a href="http://www.cleansingmatters.com/isagenixca">
    <img src="/images/canada1.gif" alt="" width="180" height="163" />
    </a>
    <a href="http://www.cleansingmatters.com/isagenixau">
    <img src="/images/australia1.gif" alt="" width="180" height="163" />
    </a>

    Modify those lines as:

    <a href="javascript:void(0)" id="link-for-usa">
    <img src="/images/usa1.gif" alt="" width="180" height="163" />
    </a>
    <a href="javascript:void(0)" id="link-for-ca">
    <img src="/images/canada1.gif" alt="" width="180" height="163" />
    </a>
    <a href="javascript:void(0)" id="link-for-au">
    <img src="/images/australia1.gif" alt="" width="180" height="163" />
    </a>
    <script type="text/javascript">
    jQuery(document).ready(function($){
    	var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
    	$('#link-for-usa').click(function() {
    		if (isMobile){window.location.href = 'http://example.com/usa';}
                   else{window.location.href = 'http://www.cleansingmatters.com/isagenixusa';}
    	});
    	$('#link-for-ca').click(function() {
    		if (isMobile){window.location.href = 'http://example.com/ca';}
                   else{window.location.href = 'http://www.cleansingmatters.com/isagenixca';}
    	});
    $('#link-for-au').click(function() {
    		if (isMobile){window.location.href = 'http://example.com/au';}
                   else{window.location.href = 'http://www.cleansingmatters.com/isagenixau';}
    	});
    
    });
    </script>

    Replace http://example.com/usa, ca, au with their relevant mobile links.

    Cheers,
    Hakan

  • itsallwhite
    • WPMU DEV Initiate

    Thanks again, where do I add the Javascript script?

    I tried adding the Javascript to the page html but didnt work (link location was just javascript:void(0).

    Should I be loading it from somewhere else?

    I understand the <a href" part.

    Sorry to be a pain!

    Tom

  • itsallwhite
    • WPMU DEV Initiate

    Sorry, I think I am misunderstanding something.

    I have copied your code from your 2nd reply in to a new wordpress post and published - but its not working.

    You said "copy/paste whole code inside the template". Do you mean I should copy this code inside the wordpress page HTML or inside a template somewhere?

    The page I have tested on is cleansingmatters.com/test

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.