console error Uncaught SyntaxError: Unexpected token <

[A11oW]

Hello. Thanks for component, but I have error in console, when I try use his.
error in this line eval(gtmScriptNode.textContent);

error happens because gtmScriptNode.textContent have html tags

maybe eval only script content?
const gtmScriptNode = document.getElementById(scriptId).getElementsByTagName('script')[0]

[FQ400]

Hi @A11oW, I will check you issue tomorrow and come back to you.

[cidevant]

In README author shows us how to use react-gtm. If you "blind" copied it - bug might be hidden here.
Look closely to render method:

      <div id={scriptId || 'react-google-tag-manager-gtm'}>
        {gtm.noScriptAsReact()}
        {gtm.scriptAsReact()}
      </div>

You see that on the first place is called method gtm.noScriptAsReact(), which does nothing, when client browsering web with enabled js. On the server it renders <iframe> and then client's browser is trying to js eval this <iframe> - big bada boom!)

Maybe this error wont happen, if your app is not isomorphic.

Cheers.

[cidevant]

Maybe this piece of code can help you) Just edit your render method like this

    return (
      <div>
        <div>{gtm.noScriptAsReact()}</div>
        <div id={scriptId || 'react-google-tag-manager-gtm'}>
          {gtm.scriptAsReact()}
        </div>
      </div>
    );

[diffractometer]

+1 @cidevant, but I had to use this.props.scriptId

    return (
      <div>
        <div>{gtm.noScriptAsReact()}</div>
        <div id={this.props.scriptId || 'react-google-tag-manager-gtm'}>
          {gtm.scriptAsReact()}
        </div>
      </div>
    );

[cidevant]

@diffractometer You are right :) I used this before return method:

const { scriptId } = this.props;

[positivew]

I also stumbled upon this problem. Could you update the example in README to be like @cidevant suggested?

[gf3]

wouldn't it be cleaner to use a ref instead of an id?

[FQ400]

I think this depends on your use case.