Script only works on page refresh in Gatsby/React

Question

I'm trying to use a script from Tock in my Gatsby website which converts a "Reserve" button into a widget.

I have tried many different ways suggested here to make this work including the methods listed in this answer.

If I put the script in the component as shown below or in html.js, the code works but only if I refresh the page. If I navigate to the page from another page, it doesn't work.

If I place in an external JS file I get compiling errors.

What I thought should be simple is providing incredibly challenging so any help is greatly appreciated! Thanks

class ReserveTock extends React.Component {

    render() {
        return (
            <>
                <script dangerouslySetInnerHTML={{
                __html:`
                !function(t,o,c,k){if(!t.tock){var e=t.tock=function(){e.callMethod?
                e.callMethod.apply(e,arguments):e.queue.push(arguments)};t._tock||(t._tock=e),
                e.push=e,e.loaded=!0,e.version='1.0',e.queue=[];var f=o.createElement(c);f.async=!0,
                f.src=k;var g=o.getElementsByTagName(c)[0];g.parentNode.insertBefore(f,g)}}(
                window,document,'script','https://www.exploretock.com/tock.js');
                tock('init', 'websitename');
                `}}
                />

                <a className = {"btn " + this.props.buttonColor + ' ' + this.props.className}
                   href="https://www.exploretock.com/websitename"
                   data-tock-reserve="true"
                   data-tock-experience={this.props.experienceTockId}
                >
                    Reserve
                </a>
            </>
        )
    }
}

theres a race condition somewhere. probably not working coming from another "page" cuz it's already loaded and was too early and when it works when you refresh it's cuz you're looking at the component already so it actually has somewhere to go. — Deryck
– Deryck, Commented Feb 9, 2020 at 18:59

Sydney Y · Accepted Answer · 2020-02-09 19:07:38Z

0

In my experience: third party scripts that you load into your page need to go as high up in the HTML as possible. So put the script tag directly in the HTML head, don't inject it with JavaScript :)

answered Feb 9, 2020 at 19:07

Sydney Y

3,1503 gold badges11 silver badges15 bronze badges

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

3 Comments

fxfuture Over a year ago

Thanks. If I put it in in <Helmet> like this <script type='text/javascript'>!function(t,o,c,k){if... it gives me "unexpected token" error

Sydney Y Over a year ago

Add defer=false in your Helmet? github.com/nfl/react-helmet/issues/314

fxfuture Over a year ago

I actually get errorr reported in my IDE - pasteboard.co/ITZE8FW.png

Collectives™ on Stack Overflow

Script only works on page refresh in Gatsby/React

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related