Mobile Web Monitoring

To create mobile web monitors, you need:

• Web browser: Firefox or Chrome.

• DéjàClick extension for the browser.

In this tutorial, we will use Firefox, but the procedure for Chrome is similar.

Mozilla has recently removed access to legacy Firefox extensions, which prevents DéjàClick from being added to older versions of Firefox (such as version 52). Until a Firefox Quantum-compatible DéjàClick extension is available, please choose any of the following options:

1. Use our Chrome extension. For instructions, see here. Note that monitors recorded in Chrome can be uploaded as either Chrome or Firefox monitors.

2. Download special version of Firefox 38 with DéjàClick pre-installed. Get it here:

   https://cdn.alertsite.com/dejaclick/firefox/Smartbear_firefox-38.4.0.en-US.win32.installer.exe

   Note that this version is only compatible with Windows OS.

3. For users who must have a version greater than 38, the version of Firefox that allows installation of unverified extensions is version 44. Once that version is installed, you can install DéjàClick directly using this file:

   https://cdn.alertsite.com/dejaclick/xpi/dejaclick.xpi

   For more information on manually installing extensions on older Firefox versions, see this link:

   https://support.mozilla.org/en-US/questions/1101877

If you have DéjàClick installed, you should see the DéjàClick toolbar in Firefox:

If you do not see this toolbar, use one of the installation methods mentioned above.

DéjàClick can emulate many popular mobile devices. You can see available devices in the list next to the button.

If the device you want to emulate is not in the list, you can add it. You need to know the device’s user agent string and its browser screen size.

How to find the user agent string for the device

How to find the user agent string for the deviceHow to find the user agent string for the device

If you have the device at hand, you can visit http://useragentstring.com from the device and copy the user agent string from there.

If you do not have the device, you can look up its user agent string on these sites:

http://user-agents.me

http://www.zytrax.com/tech/web/mobile_ids.html

http://www.useragentstring.com/pages/Mobile%20Browserlist/

Or you can do a web search for <device name> user agent string, for example, iPhone 6 user agent.

Most user strings look like:

Mozilla/version (system information) browser information

For example, Safari on iPhone 6 with iOS 8.4 has the following user agent:

Mozilla/5.0 (iPhone; CPU iPhone OS 8_4 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12H143 Safari/600.1.4

How to find the device’s browser resolution

How to find the device’s browser resolutionHow to find the device’s browser resolution

You can find the browser resolution for various mobile devices here:

http://viewportsizes.com

http://mydevice.io/devices/ (use values from the CSS width and CSS height columns)

Or you can do a web search for <device name> browser resolution, <device name> CSS width, and <device name> CSS height.

Note:

The device’s browser resolution is not necessarily the same as the physical screen size. For example, iPhones and iPads with Retina display have double pixel density and display 1 browser pixel using 4 physical pixels (2×2). While iPhone 6 physical resolution is 1334×750, its browser screen size is 667×375 pixels. DéjàClick uses the latter value as the screen size.

To add a new device:

1. On the DéjàClick toolbar, click and select DéjàClick Options. (If this button is disabled, click first to enable it.)

2. In DéjàClick options, switch to the Record tab.

3. Expand Mobile Options.

   

   Click the image to enlarge it.

   The Active Mobile Devices list contains devices that you can select for recording. The Available Mobile Devices list contains other predefined devices.

   If your device is in the lower list, click it to move it to the upper list.

   If neither list has the device you want to emulate, you need to add it.

4. Click Add to add a new device.

5. Enter the device name, user agent string, browser screen size and specify whether the device supports Adobe Flash and XHTML-MP (a legacy markup language for older phones that have WAP browsers). For example, to add iPhone 6 you can specify the following:

   User Agent String: Mozilla/5.0 (iPhone; CPU iPhone OS 8_4 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12H143 Safari/600.1.4

   Width: 375

   Height: 667

   Flash: unselected

   XHTML-MP: selected

   

   Click the image to enlarge it.

6. (Optional.) Select the device image to show during recording.

7. Click OK and close the DéjàClick options.

You record transactions by performing actions in the browser, such as navigating through pages, filling out forms, clicking links, and so on. DéjàClick will record all pages visited and actions performed.

To record a transaction:

1. Click the down arrow next to the button and select the mobile device you want to emulate. Let’s emulate iPhone 6 that we added previously.

   

   This step is important, because if you do not select a device, DéjàClick will record the transaction in the desktop mode instead of the mobile mode.

2. Click to start recording.

3. The browser window is resized to match the screen size of the emulated mobile device, and the device details appear on the right.

   

   Click the image to enlarge it.

   Now all actions you take, until you stop recording, will be recorded as part of the transaction.

4. Open the starting page of your transaction, in our example –imdb.com. You will see the website mobile version.

   

   Click the image to enlarge it.

5. Let–s search IMDb for movie titles containing matrix:

   • Click Continue to site.

   • Type matrix into the search box and press Enter.

     

   You will see a page with the search results.

You can add validations to the transaction to make sure that the site contains correct information, and things are really working. For example, you can verify that a page has the Contact Us link or the Latest News section, or that the search results contain the required items.

For our example, let’s verify that the IMDb search results contain the movie The Matrix.

1. Click on the DéjàClick toolbar:

   

   DéjàClick switches into the keyword selection mode. As you move the mouse pointer over the page, DéjàClick automatically suggests the text under the pointer as a keyword.

   

   Click the image to enlarge it.

2. Click the The Matrix link to create a validation for it.

3. In the subsequent dialog, click OK.

   

4. To exit the keyword selection mode, click on the DéjàClick toolbar again.

The transaction will now raise an error if "The Matrix" does not appear in the search results.

Click on the DéjàClick toolbar to stop recording. The browser returns to normal mode.

To view the recorded script, click . The script opens in a sidebar next to the browser. As you select the pages and events in the script, the Properties tab shows their parameters. For a description of available properties, see DéjàClick Properties Sidebar.

Before uploading the recorded transaction to AlertSite, you need to verify it by playing the transaction locally to make sure it runs correctly.

1. (Optional.) If you want to get user experience metrics in addition to standard response time, click on the DéjàClick toolbar and select Quick Settings > Replay for User Experience.

   

   Note:

   With this option the replay may take longer because DéjàClick calculates the render times of all pages visited.

2. Click to start replay.

3. DéjàClick switches to the mobile mode again and emulates the same device the transaction was recorded with. You will see all recorded actions repeated in the browser.

4. If you see a message about page content timeout or additional network activity expected, click Skip to Next Event, and DéjàClick will automatically adjust the playback parameters.

   

5. After the replay has finished, you will see the replay summary on the Results tab in DéjàClick.

If there was an error, try re-recording the transaction or try adjusting playback parameters on the Properties tab. For troubleshooting tips, see DéjàClick Troubleshooting Guide.

Once the transaction has been verified, you can upload it as a monitor in AlertSite.

1. On the DéjàClick toolbar, click and select AlertSite Login.

   

2. Enter your AlertSite login and password and click OK.

3. Click again and select Upload Recording.

4. In the dialog that appears, configure the monitor:

   • Transaction Name – The monitor name that will appear in dashboards and reports.

   • Plan Code – If you have multiple monitoring plans, select the plan to use for this transaction.

   • Interval – How often the monitor will run the transaction. Default is 5 minutes.

   • Browser – The browser that AlertSite will use to emulate the mobile device: Firefox or Chrome. If you want to collect user experience metrics, select Firefox.

     

   • Leave other settings as is and click OK.

   AlertSite will create a new monitor for the uploaded transaction.

5. You will be redirected to the AlertSite dashboard and will see other monitor settings. Review the settings and click Submit.

AlertSite will now run this transaction at the specified intervals, and report its results (OK/error), along with the total time taken to complete the transaction. You can see the monitor status on AlertSite dashboards. (You may need to wait a few minutes for the data to start appearing.)

AlertSite has four over-the-air (OTA) mobile monitoring locations within mobile carrier networks. Monitors that run from these locations run with the corresponding network speed, but will consume more measurement credits (see Usage-Based Monitoring).

To configure a monitor to run from mobile locations:

1. Open the monitor settings. To do this, click on the monitor tile on the Dashboard and select Edit Configurations.

2. Click Locations.

3. Select the check box next to the mobile locations you want to use. Type att wireless or sprint mobile into the search box to find mobile locations quickly.

   

   Click the image to enlarge it.

4. (Optional.) If you want to monitor only from mobile locations, unselect other locations. In this case, you also need to set one of the mobile locations as primary by bookmarking it in the list.

5. Click Save to save the changes.

The monitor will now emulate mobile devices connected via the selected carrier networks.