Flawsnap
Free trial

Install Flawsnap with Google Tag Manager

If your site already loads Google Tag Manager, you can add Flawsnap as a Custom HTML tag without touching the site’s code.

Steps

  1. 1

    Allow your domains in Flawsnap

    In the project’s Security settings, add every domain your GTM container runs on under Allowed domains.

  2. 2

    Create a Custom HTML tag

    In your GTM workspace, go to Tags → New, choose Custom HTML as the tag type and paste the Flawsnap code below.

  3. 3

    Fire it on every page

    Set the trigger to fire on all pages. Initialization - All Pages fires earliest; All Pages (page view) also works.

  4. 4

    Test in Preview

    Click Preview, open your site in the debug session and check that the tag fired and the button appears.

  5. 5

    Submit and publish

    Click Submit, describe the version and publish it.

The Custom HTML tag

With a tag manager, set the key in window.FlawsnapConfig rather than relying on the data-key attribute alone. The settings are then read from the page, however GTM inserts the script.

GTM → Custom HTML
<script>
  window.FlawsnapConfig = window.FlawsnapConfig || {};
  window.FlawsnapConfig.key = 'pk_…';
  window.FlawsnapConfig.apiUrl = 'https://backend.flawsnap.com/api/v1';
</script>
<script src="https://backend.flawsnap.com/widget.js" async></script>

What changes when GTM loads the widget

  • Timing. GTM loads after its own container script, so console messages from the first moments of a page can be missed. Using the Initialization trigger keeps the gap small. If you need everything from the very start, put the snippet in the site's <head> instead.
  • Content blockers. Some blockers stop Google Tag Manager altogether, and every tag in it goes too. Visitors with those blockers will not see the button. That matters more for customer feedback than for an internal QA team.
  • Loading it twice. If a developer later adds the snippet to the template as well, Flawsnap notices, logs widget.js is on this page twice; the second copy is ignored, and runs once. Remove one of them anyway.

Pass a logged-in user from the data layer

If your site pushes the signed-in user to the data layer, create Data Layer Variables for the name and email, then add a second Custom HTML tag that fires after the widget tag. GTM replaces variable references in a Custom HTML tag with their values.

GTM → Custom HTML (fires on pages where a user is signed in)
<script>
  (function () {
    var name = {{DLV - user name}};
    var email = {{DLV - user email}};
    if (!email) return;
    var f = window.Flawsnap;
    if (f && typeof f.identify === 'function') f.identify({ name: name, email: email });
    else (window.Flawsnap = f || { q: [] }).q.push(['identify', { name: name, email: email }]);
  })();
</script>

The q queue lets the call wait if the widget has not finished loading yet. Queued calls run in order once it has. The variable names are examples: use the ones in your container.

Consent banners and Insights

Bug reports are sent only when someone clicks the button. Insights, the Pro feature that maps journeys and API timing, is different: it records how visitors move through the site. If your consent tool controls tags in GTM, you can start Insights in a waiting state with window.FlawsnapConfig.insightsConsent = 'pending' in the first tag, then fire a tag on your consent event that calls window.Flawsnap.consent(true). Do Not Track and Global Privacy Control turn Insights off regardless.

Troubleshooting a GTM install

  • The tag fired in Preview but there is no button: open the console. [flawsnap] widget disabled: means the domain is not allowed or the key is wrong.
  • Works in Preview, not on the live site: the container version was not published.
  • With a Content Security Policy, allow https://backend.flawsnap.com in script-src and connect-src, as well as GTM's own hosts.

Questions

Should I use GTM or paste the snippet into the site?
Pasting into the <head> captures the most, from the first moment of page load, and is not affected by blockers that stop GTM. GTM is the better choice when you cannot change the site's code or want marketing to control it.
Can I limit the widget to some pages with GTM?
Yes. Use a trigger that matches only those pages, such as a Page Path condition. Pages where the tag does not fire will not have the button.

Try it on your own site

7-day free trial, then $9 a month for Starter or $19 for Pro, per organization, with unlimited team members.

Start free trial Try the live demo

Related

Updated