Search code examples
google-tag-managerms-clarity

Inject custom tag into Microsoft Clarity with GTM


Having user defined variable e.g. {{username}}, I want to defined a MS Clarity custom tag

doc: https://learn.microsoft.com/en-us/clarity/custom-tags

clarity("set", "key", "value");

Which in GTM context would be:

clarity("set", "username", {{username}});

GTM Clarity custom HTML

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "apikey");
</script>

Question

Where must MS custom tags portion clarity("set"... be places in GTM?


Solution

  • Kindly refer to the link https://support.google.com/tagmanager/answer/6107167?hl=en and below example.

    <script type="text/javascript">
           (function(c,l,a,r,i,t,y){
           c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
           t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
           y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
           clarity("set", "username", {{username}});
           })(window, document, "clarity", "script", "apikey");
        </script>