Page Events are typically used to capture visitor interactions to then be used as a filter to segment within Contentsquare.
These instructions are to be used alongside the Contentsquare Tag Configurator article, which includes details on prerequisites and Snippet creation.
Commonly used to
- Segmentation: To segment and compare user sessions.
- Session Replay: To pass unique values via the User Identifier event to search for specific Session Replays.
How to use it
Once you've selected the Page Event template, you can use our guidelines below for recommended and common use cases.
Good to know
- You can use up to 20 Page Events per page.
- Similar to Dynamic Variables, Page Events can be sent at any time during a session or page view.
Step 1: Complete the template input fields
- Event name: Give the event a name. The Page Event name given will display in your Contentsquare analysis context.
- Iterable context (optional): Type the iterable context of the event you wish to collect. Used to iterate through dataLayer arrays, for example, if you need to get a page event from a dataLayer[i].event. This can be left blank.
Defining a page event
You can use page events to add additional information about a page, a session, or a user. This information can simply be a text string, such as “Clicked coupon code”. Alternatively, you can add values from a global object, such as a user identifier, or a country.
If this value is always inside a fixed location in the global object, you can simply append it to the event name. For example:
If you want to grab the ‘country’ value from window.utag.data.country you would want to have the following in the “Event Name” field: Country: ${window.utag.data.country}
However, if the value is from a global object ARRAY on the page and its location within the object is not fixed, then you would want to fill in the Iterable Context field too. For example:
If the value ‘country’ is inside a global object array and doesn’t have a fixed location, you could name your event: Visitor Country: ${$.country} and the following in the Iterable Context field: values(window.dataLayer)[?country] (it isolates the object that contains the Country key in it and then passes it into the Name via interpolation as the $ sign).
For more details on defining page events, visit our technical documentation.
Step 2: Select a Trigger:
Select a trigger and define the conditions that will fire the Snippet.
Available Triggers
- After Pageview
- Before Pageview
- Element Becomes Visible
- Element Click or Tap
- Element Exists
- Element Insertion
- Element Removal
- Form Submit
- Hash Change
- History Change
- Mouseover
Template and Trigger guidelines
If you are using one of the following triggers - Element Click or Tap, Element Exists, Element Insertion, Element Becomes Visible or Mouseover - you can pass the target element's text or attributes into your event, by adding the expression: ${element.textContent} or ${element.attributes["data-pid"].value} to your Event Name, such as:
- Validation Error: ${element.textContent}
For example, imagine you use the Element Becomes Visible trigger and your target is an error message that appears under a form field (when a visitor fails to submit it). Your error text is "Please fill out your first and last name". Therefore, the resulting page event will be:
- Validation Error: Please fill out your first and last name