Custom Page Events

Custom page events are additional information on the session that can be used to segment sessions. Similar to dynamic vars, custom page events can be sent at any time during a session. Custom pages events are used when we want to segment based on a specific visitor (action or onload) event.

They are as flexible as anything you can do with JavaScript on a web page.
For instance, VoC events triggered (3 stars only, smiley face emoji…), specific messages and validation errors and even things like if page took more than x seconds to load, visitor’s status, such as “is the user logged in?“,option selected in drop-down menu. And many more…, up to your imagination.

Furthermore, it can also be used as a trigger for Event Triggered Replay (ETR) where the full user session or specific pageview is collected.

• It is possible to save up to 40 page events per pageview. If more are received, only the first 40 will be kept.
• The maximum size is 255 characters.

1. Open your container and go to the templates section.

2. Select Search Gallery.

3. Type in contentsquare and select the Contentsquare - Page Events option.

4. Click Add to workspace.

5. Confirm your choice by selecting Add

6. Go to the Tags section and click the New button to create a new tag.

7. Configure it by selecting the top-right button.

8. Search for contentsquare and select the Contentsquare - Page Events template that you’ve previously added to your container.

9. Give a title to the tag and input your Tag ID in the dedicated field.

10. Enter the event name.

11. (Optional) If needed, add additional page events.

    

12. Select the trigger.

13. Save your changes and go back to your container. You should now see both the template and the newly created tag.

1. Within Tag properties, select Rules > Add Rule.

2. Specify a name, events, and conditions.

3. Add an Action with the following settings:

   • Extension: Contentsquare,
   • Action Type: Page Events,
   • Name: Contentsquare - Page Event.

4. On the right-hand side, enter the event name.

   

5. Select Keep Changes > Save.

To define a page Event which will be automatically sent right away, use the trackPageEvent command:

<script type="text/javascript">
   window._uxa = window._uxa || [];
   window._uxa.push(['trackPageEvent', eventName]);
</script>

For example, here’s how to collect a click event:

window._uxa = window._uxa || [];
window._uxa.push(['trackPageEvent', 'SubscribedToPropertyButtonClick']);

Or how to collect a user identifier to filter Session Replays, with the @user-identifier@ prefix:

<script type="text/javascript">
  window._uxa = window._uxa || [];
  window._uxa.push(['trackPageEvent', '@user-identifier@USER_IDENTIFIER']);
</script>

See User Identifiers

Our Contentsquare Tracking Setup Assistant Chrome Extension ↗ displays each page event sent.

If you can’t use our Chrome extension, use the _cs_debug cookie.

1. From the browser console, run this command to create the cookie:

   document.cookie = "_cs_debug=compressionDisabled"

2. Reload the page.

3. In the Network tab, search for pageEvent, select the request, and check the value of the value parameter.

To check the actual request that is sent for transactions, follow GET requests will sent to //c.contentsquare.net/pageEvent, with these parameters.