Compatibility

The Contentsquare Tracking Tag is compatible with modern browsers and works alongside common frameworks and libraries.

• The Tracking Tag uses the Beacon API to send data when the user leaves the page (page load, close tab, close browser).
• This feature is only supported on macOS 12.1+ and iOS 12.2+.
• ITP 2.1 deletes all JavaScript cookies 7 days after the last visit on a website.

• Tracking works as long as the app doesn't restrict required browser APIs, delete or prevent cookies setup, or blocks local storage.
• The Tracking Tag behavior has been validated (pageviews and events tracking, session data collection) on the following in-app browsers, on both iOS and Android: Facebook, Facebook Messenger, Twitter, Instagram, LinkedIn, Slack, Snapchat, Pinterest, WeChat.

The Contentsquare Tracking Tag is compatible with all JavaScript frameworks for single-page applications, including Angular, React, Vue, Ember...

Special care must be taken for Single Page Applications that leave inactive pages in the DOM, such as Angular+Ionic.

In that case, avoid using Page Masking as it may leak some personal data into the Session Replay. Instead, use Element Masking.

Contentsquare supports iFrames, including for Zoning and Session Replay.

1. Add the tag to the topmost window and inside each iframe down to and including the ones you want to track. Use the same Tag ID.

   stateDiagram-v2
       accTitle: Iframe tracking implementation
       accDescr: Shows the implementation of the tracking tag for iframes, with the top window and two nested iframes, all with the same Tag ID, and the flow of pageviews.
       state "Top window (Tag ID = 1111111111111)" as Top {
           state "Iframe 1 (Tag ID = 1111111111111)" as If1 {
               state "Iframe 2 (Tag ID = 1111111111111)" as If2
           }
       }
   

2. Your Contentsquare team enables the iFrameTracking tag setting to support iFrame tracking. When the flag is enabled, the tag inside the iFrames is not sending any natural pageview.

3. For Single Page Applications, trigger an artificial pageview inside the iFrame with a condition to run only in this context to send a pageview.

   if (window.self !== window.top) {
     window._uxa = window._uxa || [];
     window._uxa.push(["trackPageview", "PATH"]);
   }

In version 12.0.0 and later, tracking of first and third-party iFrames in Session Replay is fully supported, and activated on demand by Contentsquare.

The tracking Tag has two separate event trackers: Session Replay and Analytics. Both provide full support for custom elements ↗ and the shadow DOM ↗.

The following features have limited or partial support with the Tracking Tag.

Since version 15.211.0 (see changelog), Session Replay captures animations driven by the JavaScript Web Animations API ↗. Support is partial: animations started by the browser's CSS engine after an element is already being tracked are not replayed.

• Element.animate(keyframes, options)
• Changes made through the Animation interface: play(), pause(), finish(), cancel(), reverse(), updatePlaybackRate(), and the currentTime setter
• Animation properties serialized in the replay: playState, playbackRate, currentTime (rounded to the nearest millisecond), and id
• Keyframes resolved via KeyframeEffect.getKeyframes() (computed values)
• Timing options resolved via KeyframeEffect.getTiming(): duration, delay, endDelay, easing, iterations, iterationStart, direction, fill; plus KeyframeEffect options: composite, pseudoElement, and iterationComposite
• The initial set of animations on an element at the moment it is first serialized (including CSS animations already running on it), via document.getAnimations()

• CSS animations and CSS transitions started after an element is already tracked — for example, a @keyframes animation or a transition triggered by toggling a CSS class. The class change itself is captured, but the animation playback isn't, so the animation may appear missing, frozen, or out of sync in Session Replay.
• Mid-flight changes to a running animation via Animation.startTime, KeyframeEffect.setKeyframes(), KeyframeEffect.updateTiming(), or by replacing animation.effect
• Animation.commitStyles() and Animation.persist()
• Animations created directly with new Animation(...) (only Element.animate() is instrumented)
• Scroll- and view-driven animations using ScrollTimeline, ViewTimeline, or any custom AnimationTimeline
• Animations inside cross-origin iframes (general Session Replay limitation)

For animations that must be faithfully reproduced in Session Replay, prefer the JavaScript Web Animations API (element.animate(...)) over CSS-class-triggered @keyframes or transition declarations.

The Tracking Tag attaches mouse listeners to <canvas> elements but cannot locate interactions inside the canvas. This limitation applies to any framework that renders its entire UI into a <canvas> element — most notably Flutter Web when using the CanvasKit renderer ↗.

• Session and visitor identification, consent, and opt-out
• Page views, when the application exposes URL changes through the History API (for example, by configuring PathUrlStrategy in Flutter)
• Any event sent explicitly through the JavaScript API (_uxa.push(...)): custom page views, custom variables, dynamic variables, ecommerce, and custom errors
• API and JavaScript error monitoring (JavaScript errors require source maps for readable stack traces)

• Zoning, click maps, scroll maps, and heatmaps — interactions can't be tied to specific UI elements
• Automatic click, hover, form, and link tracking
• Session Replay — canvas content can't be serialized
• DOM-based personal data masking — no DOM text is exposed

To get the most out of Contentsquare on a Flutter Web application:

• Configure PathUrlStrategy so route changes produce trackable page views through the History API.
• Send business events from Dart through dart:js_interop and _uxa.push(...).
• Build with source maps: flutter build web --source-maps.
• Initialize accessibility semantics at startup by calling SemanticsBinding.instance.ensureSemantics() so the application is ready to benefit from upcoming canvas-related improvements.

The following technologies and environments are not supported by the Contentsquare Tracking Tag.

Partytown ↗ is a generic all-purpose proxy that helps relocate resource intensive scripts into a web worker, and off of the main thread.

The Tracking Tag is incompatible with Partytown. It relies on DOM mutations, querying, observations, and global variables — features that do not function properly when the Tag is loaded using Partytown.

The Contentsquare Tracking Tag uses common web browser APIs and native JavaScript API. Overriding any of these APIs can prevent the Tag from functioning normally.

Contentsquare doesn't provide tracking capabilities for AMP yet.

The Tracking tag doesn't verify if data was received by the server before deleting it locally. All events would be deleted at request signing attempt.