Mobile Cookies

Bryan Jones
Bryan Jones | Monarch Digital
Contact Author

Today, visitors discover your site on a mobile, small screen device and dig deeper when they are at a big screen device (like a notebook, tablet or desktop computer). The challenge with creating mobile sites is providing seemless integration with content and a consistent user experience. Although the big screen version of your site should still display correctly on phones, the site should be device-aware to present the best display for the device used. Visitors should automatically be redirected to your mobile site and given an option to view the full site, not the other way around.

Using Drupal, there is no need for a separate site, just a separate theme. Create a folder in your sites directory called m.[yoursite].com. Add its own settings.php file and link to the sites files directory. This can be done with only a few commands. Navigate to your sites directory and type:

mkdir m.[yoursite].com
cp default/settings.php m.[yoursite].com
cd m.[yoursite].com
ln -s ../default/files files

Now you have a mobile site. If you have a theme already set up, add the following line to your mobile directory's settings.php file.

$conf['theme_default'] = '[mobile_theme]';

This will tell your site to automatically use your mobile theme while on the mobile subdomain. Creating the mobile theme may require significant work, all of the data is available to both Drupal subdomains. On a small screen device, you need to be extremely selective in which data you present to your visitors and provide only the information absolutely required.

Now lets set up .htaccess to automatically use your mobile url if you are on a mobile device:

  • Check the current URL for the subdomain of 'm'
  • Check the user agent header to determine a device
  • Redirect to the mobile url if on a mobile device
  • Set a cookie so the user will stay on the mobile site when navigating pages

The following code (with embedded comments) walk you through how to get this done:

  # The RewriteCond will check to see if the user is on the mobile site. If so the RewriteRule will set a cookie.
  # In this case the cookie is called mredir, it has a value of 1, and is for the monarchdigital.org domain
  RewriteCond %{QUERY_STRING} (^|&)m=0(&|$)
  RewriteRule ^ - [CO=mredir:1:<yoursite>]
 
  # Check if we're not already on the mobile site
  RewriteCond %{HTTP_HOST}          !^m\.
 
  # Check the user agent to detect a device. This is a standard list of devices, googlebot-mobile added for SEO
  RewriteCond %{HTTP_USER_AGENT} "android|blackberry|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC]
 
  # Can not read and write cookie in same request, must duplicate condition
  RewriteCond %{QUERY_STRING} !(^|&)m=0(&|$)
 
  # Check to make sure we haven't set the cookie before. Cookie is set after the redirection (first RewriteRule above)
  RewriteCond %{HTTP_COOKIE}        !^.*mredir=1.*$ [NC]
 
  # If all conditions above are true, redirect the user to the mobile site. The $1 will make sure the current path remains
  # intact.
  RewriteRule ^(.*)$ http://m.<yoursite>/$1 [L,R=302]

Now when you go to your site on a mobile device, it will automatically redirect to the mobile subdomain using the mobile theme. Now, let's add a button that will allow the user to view the full site. We will also add a button on the full site to go back to the mobile site, but that button will only be visible to mobile devices. We accomplish this by setting a cookie using javascript that will be read from the .htaccess file. Let's add some javascript to the mobile theme. Create a javascript file and add the following code:

// Called when the user clicks the "Show Full Site" button on the mobile site
function show_full_site(path) {
  setCookie('viewfullsite', path, 1);  // Sets a cookie for .[yoursite].com
  setCookiemobile('viewfullsite', path, 1); // Sets a cookie for the mobile site
  window.location="http://www.<yoursite>" + path;  // Reload the page
}
 
// The reason why two cookies are being set is because we want the cookie information on both domains. Cookies
// are not shared on subdomains, so m.[yoursite].com will not see cookies from [yoursite].com and vice versa
 
// This will allow the mobile user to go back to the mobile site if they had chose to go to the full site
function show_mobile_site(path) {
  Delete_Cookie('viewfullsite', '/', '.<yoursite>');
  Delete_Cookie('viewfullsite', '/', 'm.<yoursite>');
  window.location="http://m.<yoursitel>" + path;  // Reload the page
}
 
// Store values in a cookie!
function setCookie(c_name, value, exdays) {
  var exdate=new Date();
  exdate.setDate(exdate.getDate() + exdays);
  var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
  document.cookie=c_name + "=" + c_value + "; path=/; domain=.[yoursite].com";
}
 
// Store values in a cookie!
function setCookiemobile(c_name, value, exdays) {
  var exdate=new Date();
  exdate.setDate(exdate.getDate() + exdays);
  var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
  document.cookie=c_name + "=" + c_value + "; path=/";  //No need to specify path. Will default to mobile since you are
  // on the mobile site.
}
 
// Delete a cookie by setting its expiration date to a date that has already passed.
function Delete_Cookie(name, path, domain) {
  document.cookie = name + "=" + (( path ) ? ";path=" + path : "") + (( domain ) ? ";domain=" + domain : "" ) + ";expires=Thu, 01-Jan-1970 00:00:01 GMT";
}

Now that we have the cookies manipulation set up, lets add the buttons. In the mobile theme's page.tpl.php (oh wherevery you perfer. Perhaps a custom block?), add the following lines:

    <?php drupal_add_js('sites/all/themes/<themename>/<themename>.js'); ?>
    <a href="javascript:show_full_site('<?php print $_SERVER['SCRIPT_NAME']; ?>');">
      Click Here to view the full site
    </a>

Theme as necessary. Now, add the button to the full site. The following code can be added as a block or embedded in the main sites theme file settings.php. We must check the user agent to make sure normal users will not see it:

    <?php if(preg_match('/(android|blackberry|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile)/i', strtolower($_SERVER['HTTP_USER_AGENT']))): ?>
      <div id="back-to-mobile">
        <?php drupal_add_js('sites/all/themes/<themename>/<themename>.js'); ?>
        <a href="javascript:show_mobile_site('<?php print $_SERVER['REQUEST_URI']; ?>');">
          View Mobile Site
        </a>
      </div>
    <?php endif; ?>

To check if the visitor is using a mobile device, use the same selection as in the .htaccess file. If a mobile device is detected, show the button and make sure the javascript is added.

Blog Type: 
Technical