Troubleshooting Zoning Analysis

This article will help you resolve most of the common issues encountered with Zoning Analysis.

Why do I not get the pop-up to create a Zoning?

If you are experiencing difficulties with the screenshot toolbar not appearing when creating a new Zoning Analysis, it is likely due to an issue with accepting cookies. To resolve this issue, ensure that you accept cookies on your live website.

Clear you site's cookies

If you accepted the cookies on your site and if it is still not working, you may want to clear your site's cookies:

• Navigate to your live website and open the Google developer tools,
• Hit the 'Application' tab and select 'Storage option', 
• Then click on 'Clear site data' & refresh the page.

Once you've cleared the cookies, refresh the page, you should now see the cookies acceptance banner pop up on your website. Accept the cookies.

After accepting the cookies, go back and create a new Zoning again. You should now see the Zoning toolbar appear.

Why is my Zoning not displaying iFrame?

An iFrame is a component of an HTML element that allows embedding interactive documents (images, videos, texts, etc.) within a page. Using an iFrame allows you to integrate content from other sources anywhere within your page without having to include them in your website structure.

Does Zoning Analysis support iFrame?

Contentsquare supports iFrames that are owned by you in the Zoning Analysis – but not third-party iFrames (ex: Klarna payment fields).

With iFrames owned by you, the content is hosted on the same domain, or a subdomain as the page in which it is embedded. You are the owner of your iFrames. While, with third-party iFrames, you are generally not the owner of the domain (e.g. when you open the source of the iFrame in your browser the content loads on a webpage, e.g. a Youtube video).

However, data from third-party iFrames can be captured in the following cases:

• The tracking tag is present in both top-window and iFrame,
• iFrame tracking feature flag is enabled (contact your CSM for further details),
• Each domain (top-window and iFrame) is in the project domains list configuration, learn how to add the CS tag using these instructions.

If your iFrames are not supported, your screenshot will display a greyed-out area with the text ‘iFrame: this zone can’t be collected’. Tooltips and text will indicate untracked iFrames in your screenshot, live capture or CS Live.

Is there any prerequisite to get the iFrames displayed on zonings?

• The tag must be implemented on the iFrame origin page so Contentsquare can retrieve data. If the tag is self-hosted, it has to be updated.
• CS Live extension must be installed as we use it for the serialization to collect iFrames data. (Note: if you don’t have CS Live installed yet, please contact your CSM).
• If several pages are contained in the same iFrames, please contact your CSM to enable the sending of artificial pageviews.
• iFrame support in Zoning Analysis is activated on demand. If you are interested in activating it, please contact your CSM.

Why is the same zone showing different data each time I click?

When building a Zoning Analysis, you may occasionally notice the same zone displays different data each time you click on it. This happens when the zone has a parent and child element overlapping each other.

Example:

If you autozone on the Homepage menu zone and Zoning Analysis displays a 25% click rate, and then you select the manual zone on the same zone but see 32% click rate on your Homepage menu.

How do I get the correct zoning data?

• Navigate between the parent and child zones by pressing the ‘Up/down’ + Enter key and navigate using the arrows until you isolate the zone you’re interested in.
• Resolve the conflicting data by manually selecting the zone and pressing ‘up/dow’+ Enter key on the zone to adjust until the zone is not overlapping and display the 25% click rate you saw when using autozoning.

Why am I seeing different data than my teammate on the same content?

Contentsquare associates user interactions, such as clicks and hovers, with the correct site elements using targets. Targets are generated for each site element based on that element’s HTML path, making each one unique.

These unique targets act as a link between user interaction data (e.g. clicks) and a site element (e.g. a banner).

Example:

• A banner has a target generated from its HTML path.
• A user clicks on that banner.
• The click and the banner are associated via the target.
• Contentsquare displays accurate click rates for the banner.

If your site’s HTML code changes, an element(s)’ HTML path and therefore target may be affected by that change too, breaking the association. The Contentsquare features that may be affected are those relying on in-page interaction.

Why am I not seeing the same data as my teammate?

Sometimes it can be because two different site elements are associated with the same target or that one site element is associated with two different targets.

Two different site elements associated with the same target

If a page has several page layouts and URLs, the varying position of the site elements, or the presence of different site elements on each page, can affect the HTML. For example, temporary content (such as a temporary banner or an added element during an A/B test) can alter the layout of a page. This can cause one target to be associated with two different elements.

However, in the majority of cases, Contentsquare displays the correct data when temporary content is present.

One target is associated with two different elements on two different page layouts. This happens because the right layout has an added banner that affects its HTML. 

One site element is associated with two different targets

If the ID of a site element changes, it can happen that two targets become associated with that element. This can cause the data to vary for one site element across different URLs (for the same page).

The banner ID has changed causing two targets to be associated with the same banner.

Solution

If you are experiencing this issue, please submit a support ticket. Or you can also work with your IT team to build a specific identifier for a site element using the data-attribute ‘data-cs-override-id’.

How to find the div target of a zone and zone a select div ?

A divis a block-level element that creates a line break to form separate containers or boxes within your site page(s). You can see what part of your site's div structure a zone is targeting using Zoning analysis' Zones list. You'll find the Zones list inside the side panel of the zoning interface:

1. Click on the ‘Edit zones’ button,
2. Click on the drop down menu and select ‘View all zones’
3. Scroll until you see the zone’s name you want to check the target of,
4. Click on the menu button on the right of the name of the zone, then click again on ‘Zone’s target’ to see the div in the pop-up that opens.

Where are there no metrics (0.00%) or unexpected metrics displayed on my zoning screenshot?

Snapshots may display no metrics (0,00%) or unexpected metrics on specific elements or all elements due to changes made to a site page’s HTML structure before or during a selected time period you are analyzing.

Why is there one or some element(s) displaying no metrics (0.00%)?

A very common cause can be a change to your page’s HTML structure that took place before the time period selected in your Analysis Context.

Solution:

Create a new screenshot of your live site to analyze and see if it displays metrics for that time period.

Example:

An old screenshot from June is displaying no metrics (0.00 %) for the month of October due to a code update while the new snapshot is able to display metrics for this time period.

Check the chosen time period in the Analysis Context. Was the Contentsquare tag placed during the selected dates in the Analysis Context?

Why are one or some element(s) displaying unexpected metrics?

A change to your page’s HTML structure took place during the selected time period in your Analysis Context.

Solution:

Check your HTML structure change to confirm if the unexpected metric is due to a code update and not an unexpected user behavior.

Example:

Updates made to the Contentsquare Expert page were implemented on May 26 and changed the HTML structure which impacted only the ‘Use pages & mappings in your analysis’ zone element. The May 22 screenshot can only display data from before the change while the June 2 screenshot can only display data from after the change.

Dynamic IDs

Another possible root cause that can explain the low click rates is the use of Dynamic IDs.

In HTML, the ID attribute uniquely identifies an element on a page. This value must be unique across the entire page. For example, a div may have a static id like 'main-container' throughout all pages.

<div id = "main-container">

With Dynamic IDs, however, the value changes based on conditions in the client's Javascript code, such as user ID, browser version, device, or active tests.

We aggregate data by element path, calculating interaction positions using the unique ID attribute. This position is determined from the first ID encountered when climbing the DOM tree from the targeted element. When an element's ID changes between pages, the path also changes, resulting in inconsistent or missing data that confuses users and prevents accurate data collection."

For more information about id, check the Technical Docs. 

Possible solutions if you have Dynamic ids: 

• Our Support team can implement a regex that matches that div id to ignore, but in the future, that div’s id changes, then the solution will break. It doesn’t require action from your side. We will only need to know which pattern you are using for your Dynamic IDs.
• You can remove the dynamic ids from those elements – it requires an action from your side.
• You can use a series of 4 numbers in your dynamic ids. We automatically ignore ids with more than 4 consecutive digits – it requires an action from your side.
• To ignore or override an id, you can implement the data-cs-override-id attribute – it requires an action from your side. You can read more about it in our technical guide.

How do I zone the Apple Pay payment option?

If you have Apple Pay as payment option on your site, you may find it difficult to zone this button.

This is because Apple Pay is only visible for Safari users (mobile & web). Follow these quick steps to force the visibility of the Apple button so you can zone and view data.

• Navigate to your checkout payment page and open the Chrome developer console.
• • On PC: F12 or CTRL+shift+I
  • On Mac: CMD+option+I
• Toggle device toolbar and spoof an iPhone view,
• Find the Apple Pay div in the site element,
• Toggle the ‘display: none’ box off in the Styles section below.

Still stuck?

If you still experience issues with creating a new Zoning Analysis after trying any of the solutions presented in the article, please see reach out to our Support team.