Triggering Custom Events for Session Replay

Suite
Customer Experience Strategy & Research
Product
Qualtrics
What's on this page

About Triggering Custom Events for Session Replay

Once you’ve configured custom events in the Session Replay section, you’ll need to trigger (or “emit”) the events on your website. If your website uses a tag manager, you may be able to leverage your existing events in that platform to easily trigger a Qualtrics custom event.

On this page, you’ll find examples of how to do this for Google Tag Manager and Adobe Launch. There’s also a Javascript solution that can be used in your website’s product code if you don’t have a tag management solution.

Attention: Custom coding features are provided as-is and require programming knowledge to implement. Qualtrics Support does not offer assistance or consultation on custom coding. You can always try asking our community of dedicated users instead. If you’d like to know more about our custom coding services, please contact your Qualtrics Account Executive.

Triggering Custom Events with Google Tag Manager

This is a screenshot of the Google Tag Manager interface. The interface is divided into two sections: the tag configuration section and the triggering section. The tag configuration section contains a text box where you can enter the HTML code for your tag. The triggering section contains a list of triggers that can be used to fire your tag. In this case, the trigger is set to fire when the "checking account created" event occurs.
This is a screenshot of the Google Tag Manager interface. The interface is divided into two sections: the tag configuration section and the triggering section. The tag configuration section contains a text box where you can enter the HTML code for your tag. The triggering section contains a list of triggers that can be used to fire your tag. In this case, the trigger is set to fire when the "checking account created" event occurs.
Log into your Google Tag Manager instance.
Create a new Custom HTML Tag.
Qtip: If you have questions about completing steps in Google Tag Manager, please consult Google’s support documentation.
Give your new HTML tag a descriptive name.
In the HTML, create a new custom event. For example, you could add the following code, replacing YOUR_EVENT_KEY with the key from your event: var dxaEvent = new CustomEvent("YOUR_EVENT_KEY", {bubbles: true});
document.dispatchEvent(dxaEvent);
Under Triggering, select a firing trigger that matches an existing event you want to trigger the Custom Event for.
Save your changes.

Triggering Events Using Adobe Launch

Log into your Adobe Experience instance.
Create a new Custom Rule.
Qtip: If you have questions about completing steps in Adobe Experience, please consult Adobe’s support documentation.
Give it a descriptive name (for example, “New Checking Account”).
The image shows Adobe Launch. The interface is divided into three sections: 1. The left section is the **Properties** section. It contains the name of the current rule and a search bar to search for rules. 2. The middle section is the **Rules** section. It contains the conditions and actions for the rule. 3. The right section is the **Actions** section. It contains the actions that will be taken when the rule is triggered.
The image shows Adobe Launch. The interface is divided into three sections: 1. The left section is the **Properties** section. It contains the name of the current rule and a search bar to search for rules. 2. The middle section is the **Rules** section. It contains the conditions and actions for the rule. 3. The right section is the **Actions** section. It contains the actions that will be taken when the rule is triggered.
Select an event that corresponds to the existing event.
Add an action.
Set the action to Custom Code.
making a custom code action
making a custom code action

In the Javascript, create a new custom event. For example, you could add the following code, replacing YOUR_EVENT_KEY with the key from your event: var dxaEvent = new CustomEvent("YOUR_EVENT_KEY", {bubbles: true});
document.dispatchEvent(dxaEvent);

HTML in an adobe event
HTML in an adobe event
Save the code.
Save the action configuration.
back to pae where you set the action to custom code. also a save button
back to pae where you set the action to custom code. also a save button
Review your Rule, and then hit Save.
back to custom event editor, save button in upper-right here, too
back to custom event editor, save button in upper-right here, too

Triggering Events Using Javascript

Qualtrics uses the W3C Standard Custom Event interface, which makes it easy for your engineering team to emit an event that Qualtrics can observe.

Example: Imagine a banking website that already has code that triggers whenever a user creates a new checking account. Your web development team adds a new custom event with the key “newCheckingaccount:”

Event key as it appears in session replay setup
Event key as it appears in session replay setup

All your engineering team would need to do is add the following two lines of code:

var dxaEvent = new CustomEvent("newCheckingaccount", {bubbles: true});

document.dispatchEvent(dxaEvent);

This way, Qualtrics can associate these events with sessions on your website. No API tokens, authentication, or additional third-party code is required.

Attention: Please note the {bubbles: true} part of the code above. It’s important that these Custom Events “bubble” (or increase) so that Qualtrics can listen to them.

FAQs

What is an event key?

How do I find my event key?

Was this helpful?

The feedback you submit here is used only to help improve this page.

That's great! Thank you for your feedback!

Thank you for your feedback!