Sourcefabric Manuals

 English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

Template library

Browser detection and robots (search engines)

For advanced web design, it is helpful to know more about the browser where the site is being displayed. You can also detect if your pages are being grabbed by a search engine robot, and deliver content accordingly. For example, if you are using a subscription model for your publication, you can display more information to the search engine robot than you would to an anonymous reader - an example code for such behaviour you can see at the end of this chapter. This way, the search engines will list your content more descriptively than if they only grabbed the "please subscribe" page.

This chapter will give you some ideas on how to detect the client browser, or search engine robot, and change your templates accordingly. The template reference at the end of this Cookbook provides all the options for the browser object.

This is the kind of information Newscoop can get from a browser or robot:

iPhone browser

  • Browser: safari, version 528.16 | Engine: webkit, version 528.18
  • Mobile: device: iphone | OS: iphone os | OS version: 3.0
  • Bot: no
  • Type: mobile = handheld

Google Chrome browser

  • Browser: chrome, version 10.0.648.205 | Engine: webkit, version 534.16
  • Mobile: no
  • Bot: no
  • Type: bro = normal browser

Firefox browser

  • Browser: firefox, version 3.6.16 | Engine: gecko, version 1.9
  • Mobile: no
  • Bot: no
  • Type: bro = normal browser

Google robot

  • Browser: googlebot, version 2.1 | Engine: false, version false
  • Mobile: no
  • Bot: yes
  • Type: bot = web bot

The easy CSS way: classes in the body tag

An easy way to deliver different styles to different browsers is to add classes to the body tag, and then apply changes using CSS. Here some examples of the information you can print in the body tag with Newscoop:

iPhone 3

<body class="webkit mobile safari iphone iphoneos iphoneos3 iphoneos3-0 safari528 safari528-16" >

Firefox 3.6.16

<body class="moz bro gecko firefox firefox3 firefox3-6 firefox3-6-16 gecko1 gecko1-9" >

Internet Explorer 8

<body class="ie bro msie msie8 msie8-0 trident" >

Google Bot 2.1

<body class="google bot googlebot" >

Chrome 10.0.648.205

<body class="webkit bro chrome chrome10 chrome10-0-648-205" >

You can get these rich body tags using the following code snippet. Note: {{ textformat wrap=200 }} is used in this example to list all the classes in one line and avoid line breaks. The first line break would be applied after 200 characters - which is beyond what this code will deliver. Throw out what you don't need. You could also place the template in a separate file and use {{ include }}.

<body class="{{ textformat wrap=200 }}
{{ $gimme->browser->browser_working }}
{{ $gimme->browser->ua_type }}
{{ $gimme->browser }}
{{* mobile device / OS *}}
  {{ $gimme->browser->mobile_data.0 }}
  {{ $gimme->browser->mobile_data.3|regex_replace:"/\ /":"" }}
  {{ strip }}{{ $gimme->browser->mobile_data.3|regex_replace:"/\ /":"" }}
  {{ $gimme->browser->mobile_data.4|regex_replace:"/[\.][0-9]*/":"" }}{{ /strip }}
  {{ strip }}{{ $gimme->browser->mobile_data.3|regex_replace:"/\ /":"" }}
  {{ $gimme->browser->mobile_data.4|regex_replace:"/\./":"-" }}{{ /strip }}
{{* firefox / gecko *}}
  {{ $gimme->browser->moz_data.0 }}
  {{ strip }}{{ $gimme->browser->moz_data.0 }}
  {{ $gimme->browser->moz_data.1|regex_replace:"/[\.][0-9]*/":"" }}{{ /strip }}
  {{ strip }}{{ $gimme->browser->moz_data.0 }}
  {{ $gimme->browser->moz_data.1|regex_replace:"/[\.][0-9]*$/":""|regex_replace:"/\./":"-" }}{{ /strip }}
  {{ strip }}{{ $gimme->browser->moz_data.0 }}
  {{ $gimme->browser->moz_data.1|regex_replace:"/\./":"-" }}{{ /strip }}
  {{ if $gimme->browser->browser_working == "moz" }}
  gecko{{ $gimme->browser->moz_data.2|regex_replace:"/[\.][0-9]*/":"" }}
  gecko{{ $gimme->browser->moz_data.2|regex_replace:"/\./":"-" }}
  {{ /if }}
{{* internet explorer *}}
  {{ if $gimme->browser->browser_working == "ie" }}
    {{ strip }}{{ $gimme->browser->browser_name }}
    {{ $gimme->browser->webkit_data.2|regex_replace:"/[\.][0-9]*/":"" }}{{ /strip }}
    {{ strip }}{{ $gimme->browser->browser_name }}
    {{ $gimme->browser->webkit_data.2|regex_replace:"/\./":"-" }}{{ /strip }}
    {{ if $gimme->browser->webkit_data.2 > 8 }}chakra{{ else }}trident{{ /if }}
  {{ /if }}
{{* chrome *}}
  {{ if $gimme->browser->browser_working == "webkit" }}
    {{ strip }}{{ $gimme->browser->webkit_data.0 }}
    {{ $gimme->browser->webkit_data.1|regex_replace:"/[\.][0-9]*/":"" }}{{ /strip }}
    {{ strip }}{{ $gimme->browser->webkit_data.0 }}
    {{ $gimme->browser->webkit_data.1|regex_replace:"/\./":"-" }}{{ /strip }}
  {{ /if }}
{{ /textformat }}" > 

Full template control: browser_detection.tpl

To collect the information listed at the beginning of this chapter, you can use the sub-template browser_detection.tpl. It should be called in the header of your pages, and will return a set of variables that make it easy to manage your templates for different browsers or robots. Here is the code for browser_detection.tpl

{{* gecko / firefox ***********************************}}
{{ if $gimme->browser->browser_working == "moz" }}
  {{ assign var="browserdetect_name" value=`$gimme->browser->moz_data.0` }}
  {{ assign var="browserdetect_version" value=`$gimme->browser->moz_data.1` }}
  {{ assign var="browserdetect_engineversion" value=`$gimme->browser->moz_data.2` }}
  {{ assign var="browserdetect_engine" value="gecko" }}
{{ /if }}
{{* webkit / chrome / safari  ***********************************}}
{{ if $gimme->browser->browser_working == "webkit" }}
  {{ assign var="browserdetect_engineversion" value=`$gimme->browser->browser_number` }}
  {{ assign var="browserdetect_name" value=`$gimme->browser->webkit_data.0` }}
  {{ assign var="browserdetect_version" value=`$gimme->browser->webkit_data.1` }}
  {{ assign var="browserdetect_engine" value="webkit" }}
{{ /if }}
{{* ie / internet explorer  ***********************************}}
{{ if $gimme->browser->browser_working == "ie" }}
  {{ assign var="browserdetect_name" value=`$gimme->browser->browser_name` }}
  {{ assign var="browserdetect_engineversion" value=`$gimme->browser->webkit_data.2` }}
  {{ assign var="browserdetect_version" value=`$gimme->browser->webkit_data.2` }}
  {{ if $gimme->browser->webkit_data.2 > 8 }}
    {{ assign var="browserdetect_engine" value="chakra" }}
  {{ else }}
    {{ assign var="browserdetect_engine" value="trident" }}
  {{ /if }}
{{ /if }}
{{* bot / search engine  ***********************************}}
{{ if $gimme->browser->ua_type == "bot" }}
  {{ assign var="browserdetect_name" value=`$gimme->browser->browser_name` }}
  {{ assign var="browserdetect_version" value=`$gimme->browser->browser_math_number` }}
  {{ assign var="browserdetect_engine" value="false" }}
  {{ assign var="browserdetect_engineversion" value="false" }}
{{ /if }}
{{* mobile devices ******************************************}}
{{ if $gimme->browser->ua_type != "mobile" }}
  {{ assign var="browserdetect_mobile_device" value="false" }}
  {{ assign var="browserdetect_mobile_os" value="false" }}
  {{ assign var="browserdetect_mobile_os_number" value="false" }}
{{ else }}
  {{ assign var="browserdetect_mobile_device" value=`$gimme->browser->mobile_data.0` }}
  {{ assign var="browserdetect_mobile_os" value=`$gimme->browser->mobile_data.3` }}
  {{ assign var="browserdetect_mobile_os_number" value=`$gimme->browser->mobile_data.4` }}
{{ /if }}

Save the code snippet above inside the _tpl folder of your theme package. Include it like this:

{{ include file="_tpl/browser_detection.tpl" }}

If your template package has a different name, adjust the path accordingly. After the template has been called, the information about the browser listed earlier can be displayed by these lines:

<ul>
  <li>Browser: {{ $browserdetect_name }}, version {{ $browserdetect_version }}
    | Engine: {{ $browserdetect_engine }}, version {{ $browserdetect_engineversion }}</li>
  <li>Mobile: 
{{ if $browserdetect_mobile_device == "false" }}no
{{ else }}
device: {{ $browserdetect_mobile_device }} | OS: {{ $browserdetect_mobile_os }} | OS version: {{ $browserdetect_mobile_os_number }} {{ /if }}</li> <li>Bot: {{ if $gimme->browser->ua_type == "bot" }}yes{{ else }}no{{ /if }}</li> <li>Type: {{ $gimme->browser->ua_type }} = {{ if $gimme->browser->ua_type == "bot" }}web bot{{ /if }} {{ if $gimme->browser->ua_type == "bro" }}normal browser{{ /if }} {{ if $gimme->browser->ua_type == "bbro" }}simple browser{{ /if }} {{ if $gimme->browser->ua_type == "mobile" }}handheld{{ /if }} {{ if $gimme->browser->ua_type == "dow" }}downloading agent{{ /if }} {{ if $gimme->browser->ua_type == "lib" }}http library{{ /if }} </li>

Letting Google and other bots see content behind your paywall

Setting up your site to allow access to your subsrciber content is simple with browser detection. As we're only looking for two results, whether the viewer is a bot or a paying customer, we've wrapped both of the requests into a single if statement with the or operator "||". If the detection fails on either count this snippet drops the client to

{{ if $gimme->browser->ua_type == "bot" || $gimme->article->content_accessible }}
  <h2>{{ $gimme->article->title}}</h2>
  <div>{{ $gimme->article->full_text }}</div>
{{ else }}
  <p>You are not authorised to view this article. Please consider paying for a subscription.</p>
{{ /if }}

There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.