In this article, we will cover how you can integrate Usabilla data into Google Analytics (GA) using Google Tag Manager’s (GTM) Data Layer.

This integration will work with the following Usabilla products:

• Usabilla Button
• Usabilla Campaigns

Table of content:

1. Understanding the Data Layer
2. Pushing Usabilla data to GTM Data Layer
3. Creating Data Layer Variables in GTM
4. Creating a trigger for a Usabilla action in GTM
5. Connecting data from Data Layer Variables to GA event tag
6. Setting up a custom report in GA

1. Understanding the Data Layer

First of all what is a Data Layer and what's the provided benefits of using it?

Technically speaking, a Data Layer is a JavaScript array that can store certain information. It functions as a simple database that lies on the website where you can store valuable information about your users or page content. The information collected in the Data Layer can be everything from key attributes of a website (URL, page title etc.) to key information for marketing or analytics tags, like campaign ID, purchase history or other user data.

The Data Layer gives you a single data point where you can store and access all your third-party data. It also enables you to easily integrate with other third-party technologies.

2. Pushing Usabilla data to GTM Data Layer

As a first step, we need to append a code snippet into a tag in Google Tag Manager. This code snippet will make sure that all feedback that's left, is getting pushed into the Data Layer.

In your main GTM view, click on“Tags”, then “New”, followed by clicking the box that says “Tag Configuration”.

Choose the tag type “Custom HTML” and copy paste the code snippet below into the custom HTML tag:

<script>
window.usabilla_live('setEventCallback', function(category,action,label,value,userData){
    if (typeof action !== 'undefined') {
        //Append data to datalayer on all actions
        window.dataLayer.push({
            'event':'Usabilla',
            'category': category,
            'action': action, 
            'label': label, 
            'value': value, 
            'userData': userData
        });
    }
});
</script>

Your final tag setup should look like this:

Note: Make sure that you fire off this tag after the Usabilla button code has been fired off. If you have installed the Usabilla button code as a tag in GTM, then you can easily achieve this by clicking on the “Tag Sequencing” tab and setting up your rules.

3. Creating Data Layer Variables in GTM

Now it's time to create some variables in Google Tag Manager. These variables will connect the data in the Data Layer with GTM.

In your main GTM view, go to “Variables” and click on “New”. In the variable configuration window, select“Data Layer Variable” as variable type:

The variables you will create in this step depends on what data you want to integrate into Google Analytics. In this example, we will use the standard variables "category", "action", "label" and "value" from our Event Callback Method. To get an overview of the data that's stored in these variables, then take a look at our support article Using our Event Callbacks. This article also maps out the information that’s accessible on the different actions with the Usabilla form; Open, Close, Submit etc.

Tip: If you want to map out the information in the userData object then you can get an overview of the data that’s accessible by using the preview function in GTM.

Now let’s get back to creating our variables. We will create 4 data layer variables in this example. Give each of them a descriptive name, but make sure that you give it the correct “Data Layer Variable Name”.

The different Data Layer Variable Names we will create in GTM can be found in the code snippet that we appended in step 1:

For category the Data Layer Variable Name will be "category", for action it will be "action", for label it will be "label" and for value, it will be "value". Go ahead and create these variables in your GTM account and follow the example below for all 4 of them:

Now, we shall have these Data Layer Variables created in our Google Tag Manager account:

4. Creating a trigger for a custom event in GTM

To be able to send the data layer variables further on to Google Analytics, we first need to define a trigger for the event when a user interacts with Usabilla.

Go to “Triggers” then select “New”. As a trigger type select “Custom Event”. As the “Event name” you have to enter “Usabilla” (without quotation marks). Last, but not least, you can select when the trigger should be fired. In our example, we will choose “All Custom Events”

5. Connecting data from Data Layer Variables to GA event tag

To do a recap and wrap our head around what you’ve done so far:

• You’ve made sure that the Usabilla data is appended to the Data Layer
• You’ve created Data Layer Variables that are connected to the Data Layer
• You’ve created a trigger in GTM that fires off every time a Usabilla action is awakened from our Event Callback Method.

Feeling great? You’re almost ready to become a true Google Tag Manager Ninja. Now you need to connect the building blocks that you’ve created to make this kind of integration work.

Go to your main GTM view, click on “Tags”, then “New”. When clicking on Tag Type add a “Google Analytics - Universal Analytics” tag. As Track Type select “Event”. Connect the Data Layer Variables by mapping them out, one by one, from the slide-out menu that appears. Last, but not least, add the Usabilla trigger that we just created. Your final setup should look like this:

6. Creating a custom report in Google Analytics

You’ve justed accomplished to pull data all the way from the Data Layer and into Google Analytics. Give yourself a tap on the shoulder and prepare yourself for the last step: presenting the data in a custom report in Google Analytics.

How you create your custom report depends on which data you've pushed into Google Analytics. In our example we will make use of the information that's sent along with the variables category, action, label, and value:

1. Within Google Analytics click on the "Customization" tab, then "Custom Reports" and after that on the "New Custom Report" button.

2. Enter a title for your custom report and enter a name for your report tab.

3. Add the following four metrics: Users, Unique Events, Pages / Session, and Avg. Value.

4. Add the following Dimension drill-downs: Event category, Event action, Page, and Event label.

5. Optional: You can also add a filter to your custom report. E.g. filtering on the data in the "Event Category" with a Regex.

6. Click "Save" and your report should be ready. Please note that Google Analytics doesn't display their data in real time, so it can take a while before the report gets filled with data.

Congratulation! Here's a trophy for completing the integration. 

Feedback? Do you have some feedback on this article? Feel free to leave feedback via our feedback button!