New mobile redirection script


Userlevel 2

Hi everyone! We’ve seen a fair bit of confusion about how best to redirect mobile visitors to a mobile-optimized landing page recently, in particular when you have URL parameters to think about, or you’d like to redirect desktop visitors to a separate page too. Here are a couple of scripts that should simplify this.

Redirect to mobile

Use this version of the script if you want to redirect just mobile visitors, and leave desktop visitors on the current page.

<script>

  (function(){
  
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    var mobile = (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(userAgent)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(userAgent.substr(0,4)));
  
    // Your mobile URL
    var mobileURL = 'http://go.yoursite.com/mobile-page-name/';
  
    if (mobile) {
      window.location = mobileURL + window.location.search + window.location.hash;
    }
  
  })();

</script>

Redirect to mobile or desktop

Or use this version if you’d like to redirect desktop visitors to another page as well.


<script>
 
 (function(){
 
   var userAgent = navigator.userAgent || navigator.vendor || window.opera;
   var mobile = (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(userAgent)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(userAgent.substr(0,4)));
 
   // Your mobile and desktop URLs
   var mobileURL = 'http://go.yoursite.com/mobile-page-name/';
   var desktopURL = 'http://go.yoursite.com/desktop-page-name/';
 
   if ( mobile ) {
     window.location = mobileURL + window.location.search + window.location.hash;
   } else {
     window.location = desktopURL + window.location.search + window.location.hash;
   }
 
 })();
</script>

For either script, you just need to click the Javascripts button in the bottom left of the page builder, select ‘Head’ for placement, paste the script in and republish the page. Make sure you change the values of mobileURL and/or desktopURL to match your page URLs.

The scripts use much more robust mobile detection than before, and will pass on all URL parameters and #anchors.

We owe a big thanks to Markus Stefanko, who adapted our older script to use detectmobilebrowsers.com detection and pass along #anchors.

This is definitely a workaround so please bear in mind that you may experience issues with visitor/view/conversion tracking, depending on which version of the script you use. If this is something you’re concerned about, please contact us at support@unbounce.com, and we’ll try our best to point you in the right direction.

Let us know what you think!


54 replies

Hi Support

Can you please advise how we can have 2 separate designs for both mobile and web as the responsive feature does not do what we require. As we have 2 separate layouts based on mobile/desktop.

Userlevel 3

Hey Everyone!

I’ve very excited to announce Mobile Responsive has officially launched! Every user now has access to the new tools enabled within the builder. With this there’s no need for this script or the need to create separate mobile/desktop pages.

If you have any feedback let us know! We’ve love to hear it.

Thanks Quinn!

Userlevel 3

Hey everyone!

We just moved into open beta for our Mobile Responsive feature. With this there’s no need for this script or the need to create separate mobile/desktop pages. For further information check out the community post below:

https://getsatisfaction.com/unbounce/…

Userlevel 3
Badge +1

Hi Mark - Google AdBot mimics Safari mobile running on iOS, so it should redirect the same way as well.

Hi guys,

Does this script include the AdsBot of Google that looks for mobile pages as shown here?

Thanks!

Userlevel 3

Hey Mark - Instead of inserting the GTM code I would go into your GA account property and grab the original analytics tracking code. Be sure to modify it the way I detailed above.

Hi Johnny,

Thanks for this!
Can’t add referral exclusion because that way I lose attribution to the main site when/if the subdomain forwards traffic over to the main site.

So I’m going to use the GA code. Only question is, I use Google Tag Manager and the container code is plastered all over the place. How do you suggest I add this particular piece of GA code just for the redirector page?

Userlevel 3

Hey Mark - You could try to add a callback function to your GA script so that it waits for google to receive the page hit before redirecting.

Replace the following line in your GA code:

ga('send', 'pageview');

with this:

'hitCallback': function() {   
window.location = "http://www.google.com/" + window.location.search.replace(//g,'%20');   
}   
}); ```   
 
swap out '[http://www.google.com/](http://www.google.com/)' with your redirect URL   
 
Also I recommend adding your subdomain to your properties 'referral exclusion list' incase this is a small self referral issue   
 
[https://support.google.com/analytics/...](https://support.google.com/analytics/answer/2795830?hl=en)   
 
Perhaps one of these solutions will fix your referrals.

I meant for this comment:
“Keep in mind that there’s still a risk that the redirect will happen before the tracking script has fully executed.”

For example, currently, I track referrer data in the form submits. Since the form submit happens from desktop/mobile pages and they send in referrer data - I almost always see the referring URL to be that of the redirection page.

So I was wondering if this script is not fully executing?

Hi Johnny, any way to fix it?

Sure, some parralax backgrounds don’t work well on iPad with the way they are coded for unbounce. The parralax background either zooms right in and locks itself or stays static. Whereas it looks great on desktop, so I was trying to make two versions for better UX.

Userlevel 3

Hey Mark

If you wanted to follow the flow in GA from the redirect page to the desktop/mobile page then I would place the GA tracking code on your redirect page as well. Be sure to place it before your redirect script.

Keep in mind that there’s still a risk that the redirect will happen before the tracking script has fully executed.

Hey Mark

If you wanted to follow the flow in GA from the redirect page to the desktop/mobile page then I would place the GA tracking code on your redirect page as well. Be sure to place it before your redirect script.

Keep in mind that there’s still a risk that the redirect will happen before the tracking script has fully executed.

Thanks for this!
Just updated. As a side thing, any recommendation on how I could frame this in Google Analytics so it understands that mainpage directs to desktoppage or mobilepage?

Userlevel 3
Badge +1

Hi Greg - we haven’t worked on automatically adding the mobile redirection script to the app, but that’s because we’ve been working on responsive pages instead, which will allow you to have a desktop and mobile view for each page that will display automatically depending on a visitor’s browser viewport. We’re in Alpha testing right now, but we’re getting ready to move into a full beta soon. I’ve tagged your account so you’ll be amongst the first to know when that happens.

Have you guys figured out how to automate this yet within unbounce? It would seem easy enough to just have a setting on your primary landing page that allows you to indentify the mobile version you would like displayed for mobile devises. If both landing pages are in unbounce it seems there should be a way to link them and eliminate the step of having us create the script. Is this in the works or been done yet?

Hi Preston!

You got it, you’ll want to put the Unbounce script Mark references in the Head of the JavaScript manager. Then click “Done” and “Add” to separate the Google Universal Analytics snippet.

I’ve also tagged your account so you’ll be amongst the first to know when we’re ready to roll out Responsive Beta. And yes, I promise we’ll notify you with balloons and confetti.

Another question…with this “three-page-solution,” thinking of the funnel, how should we structure our parent page in contrast to the mobile - desktop children? Is the parent page just a copy of either the desktop or mobile?

The UnBounce script goes above the Google Universal Analytics snippet in the Head, right?

Will you please run down the street with balloons and confetti announcing this feature to the world and tagging me @prestonbates on twitter when you launch? Thanks in advance. One love

Userlevel 2

Hi Wilhelm. Please check your email Ð I replied to your ticket a little earlier.

For the benefit of everyone else: the scripts in this post won’t treat tablets as ‘mobile’ devices because they typically have screen resolutions comparable with desktops. For more background, see my reply above:

Hello,
we use the script with a 3 page solution. One page for redirect to desktop or mobile.
I got now the information that the redirect is not working in some cases.
One case are Lenovo Tablet with android system - the stock at the redirect page.
We loose conversions now - please try to help us quick!

regards

Reply