Developers

Last Updated: August 24th 2022

Tracking Code

We recommend that you install the tracking code within the <head> of your page so that it captures as much of the session as possible. Loading the script just before the <body/> could result in the first second or so of a visitors' session being missed.

The script is very light and loading is non-blocking, so performance should not be a concern.

You can find the correct script with your site id on the settings page of your site. Every site site is different, but here are some suggestions for where best to place the script into your app.

app/views/layouts/application.html.erb

<!DOCTYPE html>
  <html>
  <head>
    <script>
      (function(s,q,e,a,u,k,y){
        s._sqSettings={site_id:'your-site-id'};
        u=q.getElementsByTagName('head')[0];
        k=q.createElement('script');
        k.src=e+s._sqSettings.site_id;
        u.appendChild(k);
      })(window,document,'https://cdn.squeaky.ai/g/0.4.0/script.js?');
    </script>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

pages/_document.tsx

import NextDocument, { 
  Html, 
  Head, 
  Main, 
  NextScript, 
  DocumentContext,
} from 'next/document';

class Document extends NextDocument {
  static async getInitialProps(ctx: DocumentContext) {
    return NextDocument.getInitialProps(ctx);
  }

  public render(): JSX.Element {
    return (
      <Html>
        <Head>
          <script dangerouslySetInnerHTML={{ __html: `
            (function(s,q,e,a,u,k,y){
              s._sqSettings={site_id:'your-site-id'};
              u=q.getElementsByTagName('head')[0];
              k=q.createElement('script');
              k.src=e+s._sqSettings.site_id;
              u.appendChild(k);
            })(window,document,'https://cdn.squeaky.ai/g/0.4.0/script.js?');
          `}} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      );
    }
  }
}

export default Document;