Microsoft clarity script throwing error in React js

Question

I tried integrating the Microsoft clarity script tag in my react website using Helmet and the script tag is throwing an error. Even though it was copied from the Microsoft clarity website.

 `<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", "7ds6fq93fz");
 </script>`


  `Parsing error: Unexpected token, expected "}"
9 | <script type="text/javascript">
10 |     (function(c,l,a,r,i,t,y){
11 | c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
| ^
12 | t=l.createElement(r);
13 | t.async=1;
14 | t.src="https://www.clarity.ms/tag/"+i;eslint
'}' expected.ts(1005)`

My Code:

import React from "react";
import { Helmet } from "react-helmet";

class siteAnalytics extends React.Component {
    render() {
        return (
            <div className="siteAnalytics">
                <Helmet>
                    <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", "7ds6fq93fz");
                    </script>
                </Helmet>
            </div>
        );
    }
};

export default siteAnalytics;

Am I doing it wrong? or there is some issue with the script?

Answer 1

You can not write javascript directly in <script> tag.
You need to use dangerouslySetInnerHTML attribute of React for this purpose.

<script
  dangerouslySetInnerHTML={{
    __html: `
        (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", "7ds6fq93fz");`,
  }}
/>;