Как сделать перенаправление на мобильную версию

Как сделать перенаправление на мобильную версию
Как сделать перенаправление на мобильную версию
Как сделать перенаправление на мобильную версию
Редирект на мобильную версию сайта

  Делаем мобильный редирект 3-мя способами

Недавно один человек написал мне с просьбой подсказать, как перенаправить пользователей мобильных устройств на другую страницу. Он занимается арбитражом трафика и нужно отделить «мобильных» посетителей от «немобильных» и автоматически отправить первых на адаптированный лендинг, причём сделать это с помощью JavaScript.

Меня эта тема заинтересовала, т.к. сам я, временами занимаясь арбитражом, не догадывался автоматически разделить поток трафика исходя из устройства. Так что сейчас расскажу о 3-х способах сделать редирект на мобильную версию сайта — с помощью php, .htaccess и html (точнее — JavaScript).

Делаем мобильный редирект на PHP

Суть здесь в том, что каждое устройство сообщает серверу свой т.н. User Agent («юзер-агент»). В этом юзер-агенте находится информация о данном устройстве. Соответственно, с помощью PHP мы эту информацию извлекаем и, если по ней ясно, что устройство — мобильное, делаем редирект.

У мобильных устройств существует просто куча разных юзер-агентов. Я нашёл код, где учтены, наверное, почти все эти агенты:

<?php $uagent=$_SERVER['HTTP_USER_AGENT']; if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|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|phone)|xda|xiino/i',$uagent)||preg_match('/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',substr($uagent,0,4))) header('location: http://site.ru/mobile/'); ?>

Вставьте код в самое начало документа, а вместо http://site.ru/mobile/ подставьте URL, на который должны улетать мобильные пользователи. Обратите внимание, что перед этим кодом не должно быть даже пробельных символов и переводов строк — таковы уж особенности редиректов на PHP.

Передача меток и субаккаунтов на мобильный лендинг с помощью PHP

Обычно при ведении рекламных кампаний нужно получить как можно больше информации о трафике. Для этого используются, в основном, UTM-метки и субаккаунты для CPA-сетей. Хорошо бы при перенаправлении посетителя на мобильный лендинг передать и все эти данные.

Передача UTM-меток

Например, люди попадают на страницу http://site.ru/page/?utm_source=xxx&utm_medium=yyy&utm_content=zzz. Нужно, чтобы все мобильные юзеры ушли на http://site.ru/mobile/?utm_source=xxx&utm_medium=yyy&utm_content=zzz.

Для этого можно просто отрезать всё, что после ? и приклеить к мобильному URL. Однако, если исходная страница уже содержит GET-параметры, то лучше по отдельности «выцепить» все UTM-метки — это более универсальный вариант. Итоговый код получается такой:

<?php $uagent=$_SERVER['HTTP_USER_AGENT']; if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|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|phone)|xda|xiino/i',$uagent)||preg_match('/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',substr($uagent,0,4))){ $utm_source=$_GET['utm_source']; $utm_medium=$_GET['utm_medium']; $utm_content=$_GET['utm_content']; header('location: http://site.ru/mobile/?utm_source='.$utm_source.'&utm_medium='.$utm_medium.'&utm_content='.$utm_content); } ?> Передача субаккаунтов

Чтобы понять принцип действия, почитайте статью про UTM-метки и субаккаунты в CPA.

Если партнёрская ссылка, по которой мобильный посетитель должен уйти, такая http://advjump.com/go/0f3c13f70409426ba0eee42428aa9b3e365b64d1eb0a0b0b/?subid=mobile-xxx&subid1=yyy&subid2=zzz, то последняя строчка в коде выше становится такой:

header('location: http://advjump.com/go/0f3c13f70409426ba0eee42428aa9b3e365b64d1eb0a0b0b/?subid=mobile-'.$utm_source.'&subid1='.$utm_medium.'&subid2='.$utm_content);

Т.е. здесь мы из UTM-меток получили данные для субаккаунтов.

Мобильный редирект в .htaccess

Смысл тот же — исследуем юзер-агент. Если нужно сделать перенаправление с http://site.ru/page/ на http://site.ru/mobile-page/, то добавьте в .htaccess такой код:

RewriteCond %{HTTP_USER_AGENT} (?i:midp|samsung|nokia|j2me|avant|docomo|novarra|palmos|palmsource|opwv|chtml|pda|mmp|blackberry|mib|symbian|wireless|nokia|hand|mobi|phone|cdm|upb|audio|SIE|SEC|samsung|HTC|mot-|mitsu|sagem|sony|alcatel|lg|eric|vx|NEC|philips|mmm|xx|panasonic|sharp|wap|sch|rover|pocket|benq|java|pt|pg|vox|amoi|bird|compal|kg|voda|sany|kdd|dbt|sendo|sgh|gradi|jb|dddi|moto|iphone|android) RewriteRule ^([^mobile]?)page/?$ http://site.ru/mobile-page/ [R=301,L]

Эта конструкция должна идти после строки RewriteEngine On (если её нет — добавьте).

Если же нужно отправить всех мобильных посетителей на mobile-версию сайта (с любой страницы на http://m.site.ru/), то последняя строчка из кода выше может иметь такой вид:

RewriteRule ^.$ http://m.site.ru/ [R=301,L]

Как передать UTM-метки и субаккаунты посредством .htaccess я рассматривать не буду, т.к. много там заморочек. Да и вообще, если вы не очень понимаете представленные здесь коды, то лучше используйте вариант с PHP или JavaScript, речь о котором дальше.

Перенаправление на мобильную версию сайта в HTML (JavaScript)

Иногда нет возможности что-то редактировать на сайте на стороне сервера — например, вы используете конструктор сайтов. Тут-то и пригодится редирект на HTML, а точнее — на JavaScript, т.к. на простом HTML нужные условия не прописать.

Если нужно перекинуть мобильных юзеров на страницу http://site.ru/mobile/, то можно использовать такой код:

<script type='text/javascript'> if(window.innerWidth<600) location.href='http://site.ru/mobile/'; </script>

В этом случае все посетители, у которых ширина экрана меньше 600 px улетят на http://site.ru/mobile/. Если нужна меньшая ширина — меняйте 600 на меньшее значение.

Передача меток и субаккаунтов на мобильный лендинг с помощью JavaScript

При перенаправлении этим способом также можно сохранить данные о трафике.

Передача UTM-меток

Если нужно, чтобы все мобильные посетители, зашедшие на http://site.ru/page/?utm_source=xxx&utm_medium=yyy&utm_content=zzz перекинулись бы на http://site.ru/mobile/?utm_source=xxx&utm_medium=yyy&utm_content=zzz, то можно использовать следующий код:

<script type='text/javascript'> if(window.innerWidth<600){ var url='http://1derevo.ru/mobile/', l=location.href; var utm_source=l.match(/utm_source=[^&]/); var utm_medium=l.match(/utm_medium=[^&]/); var utm_content=l.match(/utm_content=[^&]/); location.href=url+'?'+utm_source+'&'+utm_medium+'&'+utm_content; } </script> Передача субаккаунтов

Если нам нужно отправить мобильного юзера по адресу http://advjump.com/go/0f3c13f70409426ba0eee42428aa9b3e365b64d1eb0a0b0b/?subid=mobile-xxx&subid1=yyy&subid2=zzz, то код немножко изменится:

<script type='text/javascript'> if(window.innerWidth<600){ var url='http://1derevo.ru/mobile/', l=location.href; var utm_source=l.match(/utm_source=([^&])/); var utm_medium=l.match(/utm_medium=([^&])/); var utm_content=l.match(/utm_content=([^&])/); location.href='http://advjump.com/go/0f3c13f70409426ba0eee42428aa9b3e365b64d1eb0a0b0b/?subid=mobile-'+utm_source[1]+'&subid1='+utm_medium[1]+'&subid2='+utm_content[1]; } </script>

Т.е. из UTM-меток получили субаккаунты.

Какой способ мобильного редиректа лучше?

По скорости перенаправления лучше PHP и .htaccess, т.к. здесь посетитель даже не видит, что его перекидывает. Однако тут всё привязано к юзер-агенту. Если у посетителя будет неизвестный юзер-агент, то редиректа не произойдёт.

С JavaScript-редиректом юзер-агент не важен, т.к. проверяется только ширина экрана. Но здесь посетитель может заметить, как сначала попадает на одну страницу, а потом его перекидывает на другую.

Так что решайте сами, какой вид мобильного редиректа вам больше по душе ;).

1 Star2 Stars3 Stars4 Stars5 Stars (Пока оценок нет)
Loading...

Случайные публикации:

Воровство контента - как найти ворованный контент и что делать в этом случае? ВидеоурокВоровство контента - как найти ворованный контент и что делать в этом случае? ВидеоурокПосле того, как вашему сайту или блогу исполнится несколько мес... Защита WordPress от спама. Плагин Akismet, как получить ключ бесплатно? ВидеоурокЗащита WordPress от спама. Плагин Akismet, как получить ключ бесплатно? Видеоурок...ам-боты - программы, которые просто находят форму для комментирования на странице сайта, Как продвинуть сайт в поисковиках? С чего начать?Как продвинуть сайт в поисковиках? С чего начать?...средств как за саму помесячную аренду ссылок, так и за оказание данной услуги. Используем форумы для раскрутки сайта в поисковых системахИспользуем форумы для раскрутки сайта в поисковых системах...н в поле не воин, теперь необходимо искать и «окучивать» и другие форумы, и чем их будет Что такое низкочастотные запросы, среднечастотные и высокочастотные запросыЧто такое низкочастотные запросы, среднечастотные и высокочастотные запросы...логично: это те слова и фразы, которые имеют в поисковой системе  Как сделать перенаправление на мобильную версию Как сделать перенаправление на мобильную версию Как сделать перенаправление на мобильную версию Как сделать перенаправление на мобильную версию Как сделать перенаправление на мобильную версию Как сделать перенаправление на мобильную версию Как сделать перенаправление на мобильную версию Как сделать перенаправление на мобильную версию Как сделать перенаправление на мобильную версию

Статьи по теме:



Рено логан сделать своими руками

Поздравления на свадьбу от мамы в прозе душевное до слез

Подарки обереги для дома

Как сделать по схеме из пластилина

Вязание спицами мохеровые модели