Creating a new mobile project

Customers who purchased the ClickTale® Touch solution can create a mobile project in the same way as a desktop project is created:

Recording mobile - existing vs new project
Before creating a new ClickTale Project for recording mobile traffic on your website, please note that you can also record your mobile traffic into the same project and use the traffic source toggle to move between traffic types (Desktop/Mobile). This does not require any changes to your ClickTale account because when you purchase ClickTale Touch, your project is automatically enabled for mobile traffic recording. You are then ready to start using the Mobile side of your project. .

The following factors should be considered when deciding between creating a new or using an existing project for your mobile recordings:


 * If your mobile website is on the same URL as your desktop website, we strongly recommend that it be recorded into your existing project. If you choose to record your mobile traffic to an existing project, please proceed to this extended article on adding mobile traffic to an existing project.
 * If your mobile website is on a different URL than your desktop website (for example, m.yoursite.com), both options are equally viable.
 * Controlling the recording ratio specifically for mobile traffic - That would be more easily achieved in a separate project, using the Balkan code slider control.
 * Having a tab-driven interface to change over from desktop traffic data to mobile traffic data - That would be achieved in a combined desktop/mobile project.

Adjusting the Tracking code for mobile

 * If your mobile website is on a different URL than your desktop website (for example, m.yoursite.com), simply paste the top and bottom code snippets into your source code, template or page-generating system (or use the same integration that you have on your desktop site), and there is no need to customize the code in any manner.

This is necessary because the ClickTale fetcher's user-agent string ("ClickTale bot" ) that is used when it sends a request to get the HTML of the page (to be later used as the background for visual reports such as Playback and Heatmaps), is served the "desktop" version of the page by default. Therefore, to ensure that ClickTale gets the mobile version of the page, you can use the following method to change the Bot's user-agent string to the user-agent string of the original mobile visitor. In addition, for a separate mobile project, visitor data needs to be routed to the appropriate Project using traffic type recognition methods, i.e. Tablet and smartphone visitors' data placed into the Mobile Project and desktop visitor's data into the Desktop Project.
 * If your mobile website is on the same URL as your desktop website, and you decided to record it to a new project, then before deploying the top and bottom code snippets onto your pages, the bottom tracking code needs to be slightly adjusted, based on the nature of your mobile site.

To change the Bot's user-agent string and direct the recordings to the appropriate Project (mobile or desktop) the following code needs to be added to the bottom ClickTale tracking code snippet:

If you have code type Atlas, the following code should be added to your Bottom tracking code just before document.write:

If you have code type Balkan, the following code should be added to your Bottom tracking code inside the ClickTalePreRecordingHook function (included in the code below):


 * PROJECT ID to send recording to - should be replaced with the project ID (PID) of your new Mobile Project. It can be found in the URL of your new account's dashboard, where the numbers after PID= is your project ID number. For example, for /Dashboard.aspx?PID=13680 the project ID is 13680. Please don't hesitate to contact support in case you have any questions on this matter.

So the end result should look something like the below:

If you have code type Atlas, click 'Expand' below to see how your final code should look. Click 'Collapse' to close the section.

If you have code type Balkan, click 'Expand' below to see how your final code should look. Click 'Collapse' to close the section.

That’s it! Once the code is placed on the pages, your account will now begin recording visitors automatically, based on the ratio you defined.

Please make sure that the domain is visible in your “Manage Domains” area. (Some plans will require for the domain to be checked).

'''Be advised! The use of the CTFetchUserAgent method (necessary when you have the same URL for both desktop and mobile, as explained previously), will result in a number of additional hits on your web pages from our fetcher that will be recognized as "alleged" mobile visitors. This may affect your server-side analytics, if present. To prevent this skewing, please add rule to ignore requests coming from our bot's IP ranges: 50.97.162.64/26 and 5.153.32.64/29''' 

Changing between traffic view modes in a project with desktop and mobile traffic types
If your project records both desktop visitors and mobile visitors, you can switch between the traffic type displays by using the traffic source toggle visible on the right hand side of your project's Dashboard.

Click the toggle to open and click the "Switch to Mobile/Desktop Traffic" link to change the traffic view display. The toggle always shows the traffic type you are looking at presently.



After you are done, it is advisable to set a few more options for the project:

Setting the default view mode the project opens to
Because desktop is always the default view mode of a project, to switch to mobile please to go to the 'Project Settings >> Advanced Settings' menu and select which traffic view mode you want the project to open to by default.



Setting Heatmap display sizes for Responsive Design


When running a mobile heatmap, ClickTale will display your webpage according to a fixed screen resolution; Smartphone traffic will be represented at 320px and tablets at 768px.

If you are tracking a responsive design, you can set your site’s breaking points and later segment your heatmap by these resolutions.


 * Name and define the required resolution breakpoints. You can add breakpoints by clicking "Add Breakpoint".
 * The next breakpoint will always start from the last resolution + 1 pixel.
 * Click "Save" at the bottom of the page to save your definitions.

When you create a heatmap for mobile traffic, use the "Responsive Version" drop-down list to filter the heatmap according to the resolutions you defined.

Note that you can also segment your visitors by device type (Smartphone/Tablet).

In this example, the heatmap displays only visitors browsing from the specified break point and using the device type (Smartphone/Tablet) you selected.

Related Articles

 * Adding mobile traffic to an existing project
 * Mobile FAQ
 * Implementing a Mobile Project
 * ClickTale Touch Interface