Why isn't my script tag displaying a banner under the header?

Technical Q&A
1

I am trying to display a banner under the header using a script tag. I am using the app created from the Shopify CLI using node.

I used the script tag API to add the script tag:

"script_tags": [
        {
            "id": 174240039086,
            "src": "https://60c05abd8442.ngrok.io/script_tag",
            "event": "onload",
            "created_at": "2021-06-28T01:23:17-04:00",
            "updated_at": "2021-06-28T01:23:17-04:00",
            "display_scope": "all",
            "cache": false
        }
    ]

And I added a

in the theme.

Here is my /pages/script_tag.js file:

import React from 'react';
import ReactDOM from 'react-dom';

class TestScriptTag extends React.Component {
    constructor() {
        super();
    }

    render() {
        return (
            
                

this is a bar

            

        );
    }
}

 ReactDOM.render(

I am getting the error: document not defined. I think this is due to server side rendering, so I thought I could get around it by doing this:

```javascript
if (typeof window !== "undefined") {
   ReactDOM.render(

But still nothing shows up. Can anyone help? I feel like I'm missing something stupid.