How to add a JS Script tag from into React App's ComponentDidMount?

Question

I'm working to use Google Optimize. I need to add this tag inside my page:

<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-X':true});</script>

to make this work in React, I'm trying the following:

import React from 'react';

const MarketingPage = class extends React.Component {
  compomentDidMount = () => {
    (function(a, s, y, n, c, h, i, d, e) {
      s.className+=' '+y;
      h.start=1*new Date;
      h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
      (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
      })(window,document.documentElement,'async-hide','dataLayer',4000,
      {'GTM-X':true}
    );
  }

React isn't liking this.. I'm getting the following error:

Move the invocation into the parens that contain the function

Is it possible to rewrite the code Google Optimize required to be React, linter friendly?

Thanks

I don't think it's React, but your linter. Just move (window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-X':true}) inside the () surrounding the function instead. — Tholle
– Tholle, Commented Aug 3, 2018 at 21:13
@Tholle would you mind posting the answer? I tried that idea and it didn't seem to make a difference so perhaps I'm misunderstanding. thanks — AnnaSm
– AnnaSm, Commented Aug 3, 2018 at 21:14

Tholle · Accepted Answer · 2018-08-03 21:20:46Z

3

I don't think it's React giving your this warning, but your linter.

You could put your function in a variable and invoke it right after instead.

const MarketingPage = class extends React.Component {
  compomentDidMount() {
    const analytics = function(a, s, y, n, c, h, i, d, e) {
      s.className+=' '+y;
      h.start=1*new Date;
      h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
      (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
    };

    analytics(window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-X':true});
  }
}

edited Aug 3, 2018 at 21:20

answered Aug 3, 2018 at 21:16

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AnnaSm Over a year ago

thank you -- that resolved the last issue now it created a new issue, it's saying unexpected unnamed function

Tholle Over a year ago

@AnnaSm Alright. I updated the answer. Hopefully that will remove all linter warnings.

Collectives™ on Stack Overflow

How to add a JS Script tag from into React App's ComponentDidMount?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related