GTM Integration

Google Tag Manager Install

Deploy Valerie through Google Tag Manager for easy management, consent mode support, and no code changes to your website.

Get Your Site ID Other Install Methods

Step-by-Step GTM Setup

Create a New Tag

In your GTM workspace, click "Tags" → "New". Name it something like "Valerie Feedback Tool".

Tag name suggestion:

Valerie - Feedback Tool

Choose Custom HTML Tag

Click "Tag Configuration" → "Custom HTML". Paste the following code:

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://talktovalerie.com/valerie/v1.js';
  script.setAttribute('data-site-id', 'YOUR_SITE_ID');
  script.async = true;
  document.head.appendChild(script);
})();
</script>

Replace YOUR_SITE_ID with your actual site ID from the Valerie dashboard.

Set Up Trigger

Click "Triggering" → "All Pages" to load the tool on every page. Or create a custom trigger for specific pages.

All Pages (Recommended)

Tool loads everywhere, you control visibility via URL targeting in Valerie dashboard.

Custom Trigger

Load only on specific URL patterns if you prefer GTM-level control.

Preview and Publish

Use GTM's Preview mode to test the tool. Once verified, submit and publish your changes.

Preview firstTest on stagingThen publish

Async Loading Best Practices

The script above uses async = true which means:

Script loads in parallel with page rendering (non-blocking)
No impact on your page's Core Web Vitals (LCP, FID, CLS)
Tool appears after your content is interactive

Performance Tip

Valerie's script is under 10KB gzipped. Combined with async loading, it has virtually zero impact on perceived page speed.

Why Install via GTM?

No Developer Required

Marketing teams can deploy and manage the tool without engineering support or code deployments.

Consent Mode v2 Ready

Leverage your existing consent management platform to control when the tool loads based on user preferences.

Centralized Management

Manage all your tags in one place. Easier to enable, disable, or modify without touching your codebase.

Built-in Testing

Use GTM's Preview mode to test the tool before publishing. Debug issues without affecting live users.

Google Consent Mode v2 Integration

If you're using Google Consent Mode v2 for GDPR/DMA compliance, you can conditionally load Valerie based on user consent. Consent Mode v2 requires four parameters: ad_storage,analytics_storage, ad_user_data, and ad_personalization.

Important: Consent Mode Requirements

Google Consent Mode v2 does not replace the need for a Consent Management Platform (CMP) or cookie banner—it works alongside these tools. You still need a CMP like CookieYes, Cookiebot, or OneTrust to collect user consent.

GTM Custom HTML with Consent Mode v2 check

<script>
(function() {
  var loaded = false;
  
  function loadValerie() {
    if (loaded) return;
    loaded = true;
    var script = document.createElement('script');
    script.src = 'https://talktovalerie.com/valerie/v1.js';
    script.setAttribute('data-site-id', 'YOUR_SITE_ID');
    script.async = true;
    document.head.appendChild(script);
  }
  
  // Check consent state via dataLayer
  function checkConsent() {
    if (typeof google_tag_data !== 'undefined' && 
        google_tag_data.ics && 
        google_tag_data.ics.entries) {
      var entries = google_tag_data.ics.entries;
      if (entries.analytics_storage && 
          entries.analytics_storage.status === 'granted') {
        loadValerie();
      }
    }
  }
  
  // Listen for consent updates
  window.dataLayer = window.dataLayer || [];
  var originalPush = window.dataLayer.push;
  window.dataLayer.push = function() {
    originalPush.apply(window.dataLayer, arguments);
    for (var i = 0; i < arguments.length; i++) {
      if (arguments[i][0] === 'consent' && 
          arguments[i][1] === 'update') {
        setTimeout(checkConsent, 100);
      }
    }
  };
  
  // Initial check
  checkConsent();
})();
</script>

Valerie and Privacy

Valerie does not use cookies by default and can operate without storing personal data. If you don't collect PII (emails) in follow-up questions, you may be able to load Valerie without consent. Consult your legal/compliance team for your specific situation.

Single Page Applications (SPAs)

For React, Vue, Angular, or other SPAs where the page doesn't fully reload, Valerie automatically detects URL changes and updates accordingly.

Automatic Detection

Valerie listens for popstate and History API changes. No extra configuration needed for most SPAs.

GTM History Trigger

If you want to re-initialize on route change, use GTM's "History Change" trigger type instead of "All Pages".

Staging vs Production

We recommend testing on staging before deploying to production. Here's how to set it up:

Option 1: GTM Environments

Use GTM's built-in Environments feature to test on staging before publishing to production.

Go to Admin → Environments
Create a "Staging" environment
Use the staging container snippet on your staging site
Test thoroughly before publishing to Live

Option 2: URL-based Trigger

Create a trigger that excludes staging domains:

Trigger: Page URL does not contain "staging." or "localhost"

Verification Checklist

After publishing your GTM container, verify the installation:

Tool appears on your site

Visit your website and look for the Valerie tool (usually bottom-right corner)

Check browser console

Open DevTools (F12) and look for "Valerie loaded" message, no errors

Test feedback submission

Submit a test response and verify it appears in your Valerie dashboard

Verify page context

Check that responses are tagged with the correct page URL

Test on mobile

Verify the tool displays correctly on mobile devices

Check URL targeting

If using URL rules, verify the tool shows/hides on the right pages

Common Issues & Troubleshooting

Tool not appearing after publishing

First, verify GTM itself is working: open DevTools → Console and type "google_tag_manager". If undefined, GTM isn't loaded. Then use GTM Preview mode to confirm your Valerie tag fires. Finally, check that your site ID matches what's in your Valerie dashboard.

Fix: Use GTM Debug → Tag Assistant to see exactly when tags fire

Tool appears then disappears

This usually indicates a JavaScript error. Open DevTools → Console and look for red errors. Common causes: conflicting scripts, Content Security Policy blocking the script, or duplicate installations.

Fix: Add talktovalerie.com to your CSP script-src directive if using CSP

Tool not updating on SPA navigation

Valerie automatically listens for popstate and History API changes. If it's not detecting navigation, your SPA may be using a custom routing solution.

Fix: Create a GTM trigger for "History Change" event type instead of "All Pages"

Consent mode not loading the tool

Ensure your CMP fires dataLayer consent updates that GTM can read. The consent state must be "granted" before the tag fires. Test by manually running checkConsent() in the console.

Fix: Use GTM Debug mode to inspect the consent state in Variables

Tag fires but tool doesn't load

Check the Network tab in DevTools. Look for a request to talktovalerie.com/valerie/v1.js. If it's blocked, check ad blockers or firewall rules.

Fix: Ask users to whitelist talktovalerie.com or test in incognito without extensions

Multiple tools appearing

You may have the script installed both via GTM and directly in your site code. The script should only be loaded once.

Fix: Remove duplicate installations—choose either GTM or direct code, not both

Ready to install?

Get Started Free

Related Resources

Install Guide All Integrations Tool Features Documentation