ClickTaleExcludeBlock

From ClickTale Wiki
Jump to: navigation, search

The ClickTaleExcludeBlock command is used for two main purposes:

  • Preventing the recording of page elements for privacy or compatibility purposes: ClickTaleExcludeBlock can be used to censor sensitive information (usually auto-populated form fields) by replacing the sensitive information with dummy text.
  • Unifying several page versions for accurate heatmaps of dynamic pages: This solves the problem of having multiple page versions - each with few pageviews - in step 2 of heatmaps and form analytics generation. Using these processing rules will allow you to tell us how to cache your page better.


Note that the notation for adding an ClickTaleExcludeBlock element is different for HTML vs. the format for JavaScript and CSS elements. See below for examples.

Using ClickTaleExcludeBlock in HTML

For demonstration purposes lets look at a part of an HTML document

    <body>
        <h1>Hi Bob!</h1>
        <p>
            Welcome to my site
        </p>
    </body>

Let's say the word "Bob" is dynamically generated, so each visitor will see a different value there. This will create multiple versions of the page (one for each visitor) and heatmaps will be very hard to use.

To overcome this issue, you can replace the above code with the following

    <body>
        <h1>
            <!-- ClickTaleExcludeBlock -->
            Hi Bob!
            <!-- EndClickTaleExcludeBlock -->
        </h1>
        <p>
            Welcome to my site
        </p>
    </body>

This tells ClickTale not to cache the username (and "Hi"). In this case the cached version will be

    <body>
        <h1>
 
        </h1>
        <p>
            Welcome to my site
        </p>
    </body>

Adding Alternative Content

Now, lets say you want an alternative content to be displayed when you view playback, heatmaps etc. You can specify alternative content simply by inserting it in the EndClickTaleExcludeBlock, like this:

    <body>
        <h1>
            <!-- ClickTaleExcludeBlock -->
            Hi Bob!
            <!-- EndClickTaleExcludeBlock Hi Username -->
        </h1>
        <p>
            Welcome to my site
        </p>
    </body>

In the cached version, this will become:

    <body>
        <h1>
            Hi Username
        </h1>
        <p>
            Welcome to my site
        </p>
    </body>

You can use HTML in the alternative content section and it can span multiple lines.

ClickTaleExcludeBlock in JavaScript & CSS

Adding ClickTaleExcludeBlock in JavaScript & CSS content uses a slightly different notation:

    /* ClickTaleExcludeBlock */
        Content to ignore
    /* EndClickTaleExcludeBlock alternative content
            which spans multiple lines */

this will become:

    alternative content
            which spans multiple lines

You should use this method to mark any timestamps, unique ids, "processed in X seconds" messages, random values and rotating elements. Doing this will insure you can aggregate those pages by version. Please note: The exclude block cannot be used with no content between the opening and closing comments, so if you simply want to add alternate content, please also add some code to exclude (e.g. an empty script tag).

Using this method you can also remove other web analytics and tracking codes. Do note that we already remove many of the popular tracking/monitoring services when we cache by default.

If you are having difficulty identifying the differences between the versions, you can use FireFox and a "diff"ing utility such as WinDiff or WinMerge to help.

Follow these instructions:

  • Open one of our overlay reports and reach a stage when you are shown a list of versions.
  • Click the preview icon (looks like a magnifying glass) on the first option, and the version will be displayed in a frame on the page.
  • Right click on your page in the frame -> "This Frame" -> "Save Frame As...".
  • You will get a "Save as" dialog. The name of the file should be a long alpha numeric string (i.e. 3768a65c6259d70c9bac499ac8a3f3d4f5eafc1d.html). Save to your disk.
  • Repeat steps to save the second version to your disk as well.
  • Run Windiff or Winmerge to compare the two files you have saved.