Inserting custom JavaScript on your Gatsby pages

Published: December 24, 2019

If you have ever tried embedding content or including analytics tags on your Gatsby pages, you know it's going to be a little more work than just throwing in JavaScript code in your .html file. There are a couple of ways you can go about doing this. For our example, we will use embedly's platform.js to allow us to embed content into our Gatsby blog easily. All the included gists on this page are embedded using embedly.

Converting the JavaScript embed code

When we navigate to the install Embedly's JavaScript library page, the page provides us with some JavaScript code to add to our <body> on the page.

<script>
  (function(w, d){
   var id='embedly-platform', n = 'script';
   if (!d.getElementById(id)){
     w.embedly = w.embedly || function() {(w.embedly.q = w.embedly.q || []).push(arguments);};
     var e = d.createElement(n); e.id = id; e.async=1;
     e.src = ('https:' === document.location.protocol ? 'https' : 'http') + '://cdn.embedly.com/widgets/platform.js';
     var s = d.getElementsByTagName(n)[0];
     s.parentNode.insertBefore(e, s);
   }
  })(window, document);
</script>

We can't just add this code to the root HTML page since this code needs to initialize on every new post or page load. This JavaScript code, of course, won't work for us, and we will need to convert this into JSX. We will need to add a dangerouslySetInnerHTML prop to the element and set it to the <script> tag contents - as a multi-line template literal set to __html. Optionally, you can add a key prop to make it unique and easy to identify this amongst other embed or JavaScript codes on your page.

<script
  key={`gatsby-embedly-platform-js`}
  dangerouslySetInnerHTML={{
    __html: `
      (function(w, d){
          var id='embedly-platform', n = 'script';
          if (!d.getElementById(id)){
            w.embedly = w.embedly || function() {(w.embedly.q = w.embedly.q || []).push(arguments);};
            var e = d.createElement(n); e.id = id; e.async=1;
            e.src = ('https:' === document.location.protocol ? 'https' : 'http') + '://cdn.embedly.com/widgets/platform.js';
            var s = d.getElementsByTagName(n)[0];
            s.parentNode.insertBefore(e, s);
          }
        })(window, document);
    `
  }}
/>

Now that we have the JSX code to add to our page, let's explore how we can include these on every page load.

The quick and dirty way

This method will involve us in modifying the gatsby page layout in html.js. Unless you need to change the page layout, I would recommend skipping to The recommended way.

First, you want to navigate to your gatsby directory run the following command in the shell.

cp .cache/default-html.js src/html.js

This command will copy the contents of the default html.js file used as the layout in the gatsby pages and posts. This file, now located in the /src directory, can be modified. You can add your JSX script tag we converted from the previous step anywhere on the page. Preferably, this should go right before the closing </body> tag, as shown below.

Embedded content: https://gist.github.com/basilkhan05/5a08b861dcc717210d9cf691a77c6985

Although this provides more flexibility on where you can add your custom embed and analytics codes, you should only need to use this in about 5% of the cases or to understand how the Gatsby page layout renders. The Github gist above should give you a good idea of the page layout and where the props like preBodyComponents and postBodyComponents go on the page and their respective propTypes.

Now that we understand what the html.js file looks like from the previous step, we can use the Gatsby SSR (server-side rendering) APIs.

  1. Add gastby-ssr.js file in your root directory.
  2. Use the onRenderBody API and pass the setPostBodyComponents as arguments
  3. return setPostBodyComponents with an array of the included JSX converted script tags

Check out the final gatsby-ssr.js gist below to view how this should be done:

Embedded content: https://gist.github.com/basilkhan05/5e1923bff714e6b08c047efe08993a75

Since setPostBodyComponents takes an array, you can pass multiple components to render before the closing </body> tag on the page. Alternatively, you can use the other parameters in onRenderBody to render your custom code anywhere on the page. Using the SSR API will make it easy to add and modify custom scripts without risking changing the layout in the html.js file.

Reach out to me on Twitter if you have questions on adding custom code to your Gatsby blogs. Happy embedding! 🔗

References

Next Post →