Skip to content
CommentKit / Frameworks

Google Tag Manager

A Custom HTML tag for sites you can only change through Tag Manager.

Why a different snippet

Google Tag Manager rebuilds every <script src> in a Custom HTML tag and keeps only its address. The data-project key of the usual tag is dropped, so CommentKit would load without knowing your project and stay hidden. This snippet builds the tag itself, so the key stays.

Custom HTML
<script>
  (function () {
    var s = document.createElement("script");
    s.src = "https://commentkit.dev/cdn/v1/loader.js";
    s.setAttribute("data-project", "pk_live_your_key");
    document.head.appendChild(s);
  })();
</script>

Add other options the same way, for example s.setAttribute("data-branch", "staging");. The snippet works however late Tag Manager runs it: CommentKit starts whenever it loads.

With widget 1.4 or later, a plain tag also works when the key is in its address: <script src="https://commentkit.dev/cdn/v1/loader.js?project=pk_live_your_key"></script>. Other options still need the snippet above.

Add CommentKit

  1. In CommentKit, open Project → Setup, copy your project key and add every address people will review on: every site this container runs on. Use the exact address: a wildcard such as *.webflow.io is refused, because anyone can host a site there.
  2. In Tag Manager, open your container, go to Tags → New and choose Tag Configuration → Custom HTML.
  3. Paste the snippet above, with your project key. Leave Support document.write off.
  4. Under Triggering, choose All Pages, and save the tag.
  5. Click Preview, open your site and press Ctrl/Cmd + Shift + K. When it works, click Submit and Publish.

Single-page sites need only the page-load trigger: once loaded, CommentKit follows page changes itself. A history-change trigger would only run the snippet again.

Show it to clients

Open Project → Client links, create a link (for example “Anna – homepage review”) and send it by email, Slack or WhatsApp. It opens your site with the feedback button ready. Your client confirms their email once; no account or password.

Teammates open the site and press Ctrl/Cmd + Shift + K, or follow any CommentKit email. After they sign in once, the widget shows for them on that device.

Keep it off the live site

You do not need to do anything for regular visitors. On every address except localhost, the widget stays hidden until someone opens a client link, follows a CommentKit email, presses Ctrl/Cmd + Shift + K or is already signed in. Visitors only download a tiny loader and see nothing. Do not add data-hide-on-production="false" on a live site: it shows the button to everyone.

To load CommentKit only on staging, give the tag a trigger of type Page View that fires on Some Page Views where Page Hostname equals your staging address, for example staging.example.com.

Troubleshooting

  • Tag Assistant shows the tag fired but nothing appears: check you pasted the snippet from this page, not the usual <script src> tag, and that you published the container version.
  • A consent setup that holds tags back until a visitor accepts also holds CommentKit back. Check the tag’s consent settings if reviewers decline the banner.
  • Ad blockers that block Tag Manager also block every tag in it. Reviewers can use the browser extension instead.
  • Still nothing? Open the browser console: CommentKit writes one message starting with [CommentKit] that says what went wrong (for example a website address missing from Project → Setup, or a Content Security Policy; see the CSP guide). The troubleshooting page covers the rest.