How to Use Google Tag Manager Triggers to Set Qualaroo Custom Properties

Are you interested in using your Google Tag Manager triggers to segment your audience? This help article will show you how to use Google Tag Manager (GTM) events (triggers) with Qualaroo in order to set custom properties -- which can be used to target certain site visitors, as well as pass data to be associated with the responses collected in your Qualaroo survey.

First, follow Google's instructions for getting GTM set up with your site, and adding the web property in your GTM account.

Great! Let's set up your GTM Trigger.

Your finished Trigger should look like the following:

Next, add a new Tag that will set Qualaroo custom properties when your new Trigger is fired.

In the custom HTML tag you have created, the HTML content should be the following JavaScript:

<script>
 setTimeout(function() {
   if (typeof window._kiq !== 'undefined') {
     // Should be removed after testing
     console.log('Setting custom property')
     _kiq.push(
      [
        'set', { 'customEvent': {{Event}} }
      ]
    );
   }
 }, 10000);
</script>

Again, here's a screenshot of how it should look when it's all set up:

You'll notice the above JavaScript is setting the custom property 10 seconds after the event is fired. This is great if you want to control how long after user action is made to show a survey, for example. To make it instantaneous, change the content to:

<script>
 if (typeof window._kiq !== 'undefined') {
   // Should be removed after testing
   console.log('Setting custom property')
   _kiq.push(
     [
      'set', { 'customEvent': {{Event}} }
     ]
   );
 }
</script>

The last step in our GTM setup is to create a variable for the Custom Event you have created. Go to "Variables" and add a new one that should look like:

For this next part, you'll need to have a developer's help to set up how your GTM Trigger is fired. We'll show you how to do this with a button click:

<button onclick="dataLayer.push({'event': 'buttonClicked'});">Click here</button>

This button will add the event "buttonClicked" to the dataLayer, which will then set the Qualaroo custom property called "customEvent" with the value "buttonClicked", because that's what your custom variable is set as.

In addition, using GTM and Qualaroo should make it even easier for you and your team to utilize more of Qualaroo's advanced features without needing much help from your developers -- in fact, implementing the above should only take your developers as long as it takes you to grab them a coffee from the breakroom for their help ;)

We hope this information has been helpful. Please reach out to support@qualaroo.com if you ever have any questions or need anything at all!