How to integrate Ezoic with GatsbyJS and fix Ezoic performance!

In this post we are going to look at how to integrate Ezoic with GatsbyJS in a few simple steps.

If you have set up a gatsby site and are running ads through Ezoic you might not be seeing the results you originally expected, they might be performing much worse than expected.

I recently had these issues and have found a few work arounds to get Ezoic performing as it should with GatsbyJS.

The problem with Ezoic and GatsbyJS

I have found that the problem that occurs when integrating Ezoic with a GatsbyJS based siteall stems from re-rendering and hydration of the DOM which comes from ReactJs.

When your gatsby site loads into a web browser initially, the user will first see the actual HTML from the build, this is when ezoic starts loading in it’s ad placements.

Then, once the React and Gatsby scripts start loading onto the page, something known as hydration starts taking place which is where React and Gatsby will essentially refresh the existing HTML elements to then match what should be there from the React code you have written in Gatsby.

When the hydration step occurs, where the ad placements get attached to the initial HTML in the DOM they then get removed because they are not part of the dynamic structure from React / Gatsby.

So what is essentially happening is most of the time any ads that get placed in the DOM by Ezoic, then mostly get removed by React and Gatsby from the hydration and other re-rendering steps.

How to integrate ezoic with GatsbyJS

With this problem in mind, it is possible to fix these issues by removing the additional react scripts that are added into your Gatsby site at the build stage.

You can do this with the use of the gatsby-plugin-no-javascript-utils plugin that is available from npm and then adding the following into your gatsby-config.js file.

plugins: [
  {
    resolve: "gatsby-plugin-no-javascript-utils",
    options: {
      noScript: true,
      noSourcemaps: true,
      removeGeneratorTag: true,
      removeReactHelmetAttrs: true,
      noInlineStyles: false,
      removeGatsbyAnnouncer: false,
    },
  },
];

An important note to remember is that this will remove any script from your site so you need to ensure that you build your gatsby site in a way that avoids the need to have too much JavaScript on the page.

You will most likely still need to have some additional scripts in your page, and in this case you can still add them in by creating a plugin or editing the gatsby-ssr.js file to ensure that your scripts get added in after the others have been removed.

Here is a quick example of how to do this in gatsby-ssr.js:

const React = require("react");
const isProduction = process.env.NODE_ENV === "production";

exports.onPreRenderHTML = ({
  getPostBodyComponents,
  replacePostBodyComponents,
}) => {
  if (!isProduction) return;
  const postBody = getPostBodyComponents();

  const createNewScript = fn => `(() => {
    setTimeout(() => ((${fn})(), 1);
  })();`;

  const scripts = [];
  // add your scripts in here.
  scripts.push(createNewScript('console.log("Hello World!")'));

  const headComponents = [];

  scripts.forEach(s => {
    headComponents.push(
      <script defer key={s} dangerouslySetInnerHTML={{ __html: s }} />
    );
  });

  replacePostBodyComponents([...postBody, ...headComponents]);
};

This also unfortunately means you won’t get all the benefits from using Gatsby, such as the client side router that makes changing routes exceptionally quickly.

It is therefore important to avoid using any dynamically loading components such as Gatsby Image, or Links and instead to use optimised html elements.

But by doing this it does enable you to still build your site using Gatsby and benefit from developing in Gatsby, React and JavaScript whilst outputting a HTML based site which is often better for users anyway and will still end up being more performant than most other website generators such as wordpress and ect.

Step by Step guide to integrating Ezoic with GatsbyJS

1. Install the gatsby-plugin-no-javascript-utils dependency.
2. Add the gatsby-plugin-no-javascript-utils config into your plugins within gatsby-config.js.
3. Replace any dynamic components that rely on the imported scripts such at Gatsby Image or Link with HTML elements such as <img /> or <a />.
4. Build your site and test that everything is working.
5. If you need additional scripts either create a new local plugin, or open up gatsby-ssr.js and then make use of the onPreRenderHTML method with the replacePostBodyComponents function to add in your scripts post build.
6. Deploy your site and test everything is working as expected.
7. If you haven’t already, head over to ezoic.com and follow the integration guide preferably with the DNS settings.

Summary

There we have how to integrate ezoic with GatsbyJS, if you want more like this be sure to check out some of my other posts!