Inject Adsense into Production React Application

Adsense is great and a very easy way to put ads in your web content. A problem I encountered however when developing single page applications (SPAs) with React is injecting it into the header of index.html.

We have this script from Google Adsense that we have to inject inside the <header></header> tag:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567"
     crossorigin="anonymous"></script>

You could still just put the script into the header of your static public/index.html file, and that will work.

However, what if I don't want to include the script when I'm debugging locally? There is a way!

It will depend slightly on your development platform, but if you're using Linux or Mac then you should have the sed command-line tool available. We will use it when we modify our react build script!

Running in development vs deployment

Running a react app locally and deploying it in a web server are two different things. When you run it locally on your development machine, you likely use the following command to create a local web server so you can access it in your browser at localhost:3000:

npm start

When you deploy it on your web server, there are several ways you might be doing it, but let's use the case where you are building a production html package, and serving in a web server like Apache or Nginx. You will likely be using the following command:

npm run build

This creates a folder build which has a (scrambled) copy of your public/index.html.

The solution

Now, if you were to edit your original public/index.html you would get the script injected in both of these scenarios. But if we only want it in our production build, we will have to do a bit of post-processing!

We will modify our npm run build script to add the script after the fact!

Edit your package.json file, and locate the following:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Modify it so you end up with this:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && sed \"s~<head>~<head><script async src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567\" crossorigin=\"anonymous\"></script>~g\" build/index.html -i",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Notice how we're using ~ instead of the default \ in our regex. This is because the replacement string contains the \ character, so it just simplifies things.

Make sure that you escape the " characters of the URL so they appear as \" as I have done in my example! This is so they don't get interpreted by sed.

Now, if you run npm run build again, and inspect your build/index.html file you should see that the Adsense script appears at the beginning of the <head></head> tags!

Alternatively, if you want to have your package.json look a bit neater, you could keep the script in an environment variable, and read the variable in your build script:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && sed \"s~<head>~<head>$MY_ADSENSE_SCRIPT~g\" build/index.html -i",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

Let me know what you think about the solution in the comments!

Running in development vs deployment

The solution

Leave a Reply Cancel reply