In this article, we are going to run through a deep dive on using Google Tag Manager to integrate Feedier’s feedback widget onto any website or application. 


Advantages of using Google Tag Manager (GTM):

  • No developer time needed 
  • Proactive Feedback collection using triggered events
  • Attach contextual attributes easily


Make sure to read the Feedier web widget integration guide first here. GTM makes the integration a 5-min process. 

Let’s get started. 


Step 1: Create a new tag in Google Tag Manager


Add a new Tag directly from Google Tag Manager:


Then, add an explicit Tag name like “Feedback Widget Feedier” and click the Tag Configuration icon:


Step 2: Configure the tag and widget


Select “Custom HTML” in the Tag Type. In the editor, simply paste the widget code available in the Form’s share page.  

Don’t know where to find the widget code? Checkout this article.

The widget code can be customized when setting up on the share page, and can be further customized using custom CSS  to choose text and styles.



Step 3: Passing Context Attributes (meta-data) through the widget and attach to feedback automatically


Where it gets really good is that GTM lets you add contextual information (variables from the user) in the Custom HTML and therefore using the Feedier widget’s data-context-attributes option.


In this example, any new Feedback will also contain the page_source, role, signup_date and plan of the user. Bringing valuable context that can be used to segment data and build powerful user stories. Google Tag Manager will automatically replace the variables defined using their data layer. Find more information about data layer on their official documentation.  


Step 4: Trigger the widget


To show the right widget with the right form to the right user we need the right triggers. Lucky us, GTM makes it easy. Common workflows could be: 

  • Ask Feedback after signup
  • Ask Feedback 5th visit
  • Ask Feedback before leaving app
  • Ask Feedback after achieving a product goal (ordering, booking, creating, updating…)
  • Ask Feedback for new ideas on specific demographics

How to do it? In the Tag Settings, click “Triggering“. Then click the + icon to configure the trigger to show the widget code:

Here is an example: 

This is a very simple example but GTM supports more advanced use cases using custom events. 

If you have any questions, contact our team at help@feedier.com.


We could also imagine storing the email or any other demographic data we have on our customer -- assuming he is logged into the app or website in some way.


This is assuming you set up, in your GTM dashboard, the right variables containing the values of what you want to store.

Note:

  • Make sure that jQuery is loaded on the page. It's a common error. If your widget isn't loading, and you have no idea why, you can easily figue out if jQuery is the culprit. Open the console (right click on the page > "Inspect the page"). You will see the error that jQuery isn't loaded. 
  • Make sure to publish a new version in GTM when you make changes in your configuration (eg. you change the triggering method).