Learn how you can embed the widget on your website with Google Tag Manager.


The first thing you need to do is grab your widget code, from the Feedback Carrier's sharing dropdown:

The second thing to make sure is that Google Tag Manager (referred as GTM in this article) is properly loaded and configured on your website. You might want to refer to this article. 

Let's assume our snippet is the following:

<div class="feedier-widget" data-type="engager" data-shake="false" data-position="left" data-in-site="true" data-carrier-id="5190" data-key="XXXXXXXX"></div><script src="https://feedier.com/js/widgets/widgets.min.js" type="text/javascript" async></script>


Display The Widget On Pages

We will now head over to GTM and add a new tag. 

Our tag will have the following setup: 

  • Tag Type: Custom HTML 

We will insert our snippet from Feedier in this custom HTML section.

  • Trigger: Page View

For the sake of this first example, we will display the widget on every pages (although that's not ideal). 

This trigger is fairly simple. We choose the "Page View" trigger, and then choose the option "All pages views". 

We can also choose to display on specific pages only (eg. only on the homepage), but choosing the option "Some Page Views". 


Demonstration below:


Display The Widget Based On The User Scroll-through Rate

You can find the trigger in the Google Tag Manager user interface, by navigating to Triggers, clicking the NEW button, and selecting the Scroll Depth trigger template from the list.


When you create the trigger, you’ll see the following configurable options:

  1. Vertical Scroll Depths - set the trigger up for tracking vertical scrollPercentages - track percentages of vertical scrollPixels - track vertical pixel depths
  2. Horizontal Scroll Depths - set the trigger up for tracking horizontal scrollPercentages - track percentages of horizontal scrollPixels - track horizontal pixel depths
  3. All pages / Some pages - enable the trigger either on all pages or only on some pages

The settings should be quite self-explanatory. For example, to track vertical scroll (i.e. scrolling from top to bottom) so that an event is triggered with 25% of page scrolled, 50% of page scrolled, 75% of page scrolled, and reaching the end, you’d set the trigger up as in the very first image of this article.

You might want to delimit the trigger to collect data only on content pages, which is where the Some pages option will come useful:


That’s it for the configuration. Save and publish.


Pass Values to the Feedback

For instance, you might want to collect the page URL on which the user submitted the feedback. Let's see how we can achieve that. 

Note that this is a simple example as the page URL is a native GTM variable. But you could also create your own variable (such as User Email) and use it. (More).


First, we will create a custom field to store our value. In our case, let's create a custom field called source_url in our Feedier dashboard. (Learn how here). 

We will then use this custom field in GTM.

Head back to the configuration of your tag, and click on the tag itself. We will add the following:

data-custom-fields="source_url={{Page URL}}".




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

For the email, we would use data-email, for the others, we would use data-custom-fields. More on that on the main integration article.

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

Caveat

  • 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).