Install a feedback widget with Google Tag Manager

When is Google Tag Manager the right install path?

Google Tag Manager is useful when someone other than a developer manages a site's scripts, such as a marketing lead who already uses tags for analytics. If your team already has a container on every page, adding the widget as one more tag is quick and keeps the site's code untouched.

If the site has no container yet, a direct script tag in the site code is simpler. Add GTM only when you already use it or want other tags managed in one place.

Create a Custom HTML tag with the snippet

In your GTM container, create a new tag. Choose the Custom HTML tag type, and paste the script tag from your product's install page into the HTML field:

<script src="https://escutaproduto.com/widget.js" data-key="pk_your_product_key" defer></script>

Give the tag a clear name, such as Escuta Produto widget, so the team can find it. Leave the option that supports document.write turned off unless a vendor specifically requires it. The widget does not need that option, and document.write can delay the page, so keeping it off is the safer default.

Keep the attributes exactly as written. The data-key attribute identifies your product, and the other options such as data-color, data-position, data-locale and data-trigger are read from the same tag. A typo or a removed attribute changes the widget's behavior without an obvious error.

Fire the tag on every page

Attach a trigger to the tag. The built-in All Pages trigger fires on every page view, so the floating Feedback button appears site-wide. Choose it, save the tag, and make sure the tag is set to fire on the trigger you chose.

If you only want the widget on some pages, use a trigger with a condition on the page path instead. Keep the condition simple, and test each page you expect to include. A page that the trigger misses will have no button and no obvious error for the visitor.

Test in preview mode before you publish

Use GTM's preview mode before you publish the container. Preview mode runs your tags on the live site in a debug panel, and it shows which tags fired on each page. Open your site in preview mode and check that the widget tag fires on the homepage and on an inner page.

Then confirm the result on the published site, after you publish the container version. Open a page in a private window, check that the floating Feedback button appears in the corner, and send a short test message. Look for the item in your inbox with the page URL saved.

Publish only after the preview checks pass, because publishing sends the new container version to every visitor.

Identify users through a separate tag

GTM can also send the signed-in user's email to the widget, but do this as a second tag rather than changing the widget tag. The identify call uses the queue pattern, so it works in either order. Read the email from a data layer variable that your site already pushes for logged-in users, then fire the tag only on pages where that variable exists.

Only do this when your site already puts the user's email in the data layer. If it does not, the form stays anonymous with an optional email field, which is a perfectly good default.

Check the Content Security Policy first

A Content Security Policy is a header that tells the browser which sources the site may load scripts from and send requests to. If your site sends one, the policy must allow the widget. The script loads from escutaproduto.com, so script-src has to include that host. Feedback is sent to the same host through its API, so connect-src has to include it too.

If the widget loads but nothing sends, a policy blocking connect-src is a likely cause. Check the browser's console for a message about a blocked request. The fix belongs in the site's policy, not in GTM.

Consent and tag firing

If your site uses a consent tool that holds tags until a visitor agrees, the widget tag will wait too. That is the behavior you chose when you set up consent, and it is worth knowing before you launch. A visitor who has not agreed will not see the floating button on that page view.

Check the trigger and consent settings together. A tag that never fires looks the same as a broken widget, so use preview mode to see whether the tag fired at all.

Feedback from tag-managed sites in Escuta Produto

Messages arrive in the inbox of the product you set up for the site, with the page URL and browser saved. Because GTM often runs on marketing pages as well as the app, you can see which marketing page a complaint came from. Filter by type and status to keep the list tidy.

Internal notes record decisions, such as a campaign landing page you changed because of a bug report. Slack and Discord webhooks in the product settings send each new message to your team, with a link to the dashboard.

Related

• Every widget option, including data-trigger and the JavaScript API, is in the widget docs.
• A link-based alternative that needs no tags is in the hosted page docs.
• For another install approach, read Add a feedback widget to a WordPress site.
• For the collection step as a whole, read How to collect customer feedback.