Creating Mobile Web Monitors

AlertSite’s mobile web monitors simulate visiting your site from phones, tables and other mobile devices. You can use them to test your site as it appears on mobile devices.

You create mobile web monitors by recording user path through your website by using the DéjàClick recorder. DéjàClick is a browser extension for Firefox and Chrome. It can emulate mobile devices by changing the browser’s user agent string and screen size. This masquerades the browser as a mobile device, causing the web server to return the mobile version of the website. Once you have recorded a transaction, you can upload it as a monitor to run from AlertSite’s global monitoring locations.

In this tutorial, we will create a monitor for the mobile version of the IMDb website. The monitor will search for Matrix, and verify that the search results contain the 1999 movie The Matrix.

In This Tutorial

Requirements

To create mobile web monitors, you need:

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

1. Install DéjàClick Recorder for Firefox

First, check if you have the DéjàClick toolbar in Firefox.

DejaClick toolbar in Firefox

If you do not see this toolbar, install DéjàClick from the Firefox Add-ons website:

2. View and Add Mobile Devices

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

Built-in mobile device profiles for emulation

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.

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 Power On first to enable it.)
  2. In DéjàClick options, switch to the Record category.
  3. Expand Mobile Options.

    Mobile device profiles

    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

    iPhone 6 properties: user agent, browser screen size

  6. (Optional.) Select the device image to show during recording.
  7. Click OK, and close DéjàClick options.

3. Record a Mobile Transaction

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.

Tip: During recording, wait for the pages to load completely before performing any actions on the page.

To record a transaction:

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

    Selecting the mobile device to emulate

    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 Record to start recording.
  3. The browser’s window is resized to match the screen size of the emulated mobile device, and the device details appear on the right.

    Browser display area resized to match the mobile device size

    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’s mobile version.

    Mobile web site

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

    You will see a page with the search results.

4. Add Keyword Validation (Optional)

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 Validate on the DéjàClick toolbar:

    Validation button on the DejaClick 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.

    Keyword selection mode

  2. Click the link “The Matrix” to create a validation for it.
  3. In the dialog that appears, click OK.

    Add Keyword Validation dialog

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

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

5. Finish Recording

Click Stop Recording 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.

Recorded transaction

6. Verify Recorded Transaction

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 user experience metrics in addition to standard response time, click Configure Options on the DéjàClick toolbar, and select Quick Settings > Replay for User Experience.

    Replay for User Experience option

    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.

    Page Content Change Timeout

  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.

7. Upload Transaction to AlertSite

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

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

    AlertSite Login

  2. Enter your AlertSite login and password, and click OK.
  3. Click blue globe again, and select Upload Recording.
  4. In the dialog that appears, configure the monitor:

    A new monitor will be created in AlertSite 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’s dashboards. (You may need to wait a few minutes for the data to start appearing.)

Monitor status

8. Emulating 3G and 4G Speeds (Optional)

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).

Location Name Backbone Connection Supported Monitors
Firefox Chrome
Fort Lauderdale, FL - ATT Wireless AT&T Wireless 3G + +
Fort Lauderdale, FL - Sprint 3G Mobile Sprint 3G +  
Atlanta, GA - ATT Wireless AT&T Wireless 3G +  
Atlanta, GA – Sprint 4G Mobile Sprint 4G +  

To configure a monitor to run from mobile locations:

  1. Open the monitor settings. To do this On AlertSite’s Dashboard, click the monitor and then click pencil to open the monitor settings.
  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.

    Monitoring locations with mobile connections

  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 bookmark 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.

See Also

© 2017 SmartBear Software. All rights reserved.      Terms of Use · Privacy Policy