• You Don’t Need To Be a Developer to Add Google Optimize A/B Testing to Your React App

    If you need to start conducting A/B testing and you don’t know what Google Optimize is, you’ve come to the right place. Google Optimize is a tool that comes in handy when you want to do A/B testing on your site. It’s the perfect helping hand for non-engineer personnel to be able to start, optimize […]

    optimize

    If you need to start conducting A/B testing and you don’t know what Google Optimize is, you’ve come to the right place.

    Google Optimize is a tool that comes in handy when you want to do A/B testing on your site. It’s the perfect helping hand for non-engineer personnel to be able to start, optimize and analyze A/B testing on your website.

    How To Create Your React App

    First of all, you would need to install npm if you don’t have it, then start by opening your terminal. By using create-react-app, we will be creating a brand new React app right from scratch and we will add Google Optimize to your new app. Before starting, we should make crystal clear what each command does. -Npx ensure that you can use -create-react-app without needing to install it globally. And -npm grants your system access to -npx. Open the terminal and type:

    npx create-react-app optimize
    cd optimize
    npm start

    When you’ve done that, the React app should be up and running at localhost:3000 in your browser. Like in the image below. Type in localhost:3000 in your browser’s navigation bar and let’s go. You should see something like this:

    React app
    React app in Browser, localhost:3000, Image courtesy of medium.com

    The next step in the process is to set up the Google Optimize Experiment.

    How To Set Up a Google Optimize Experiment

    1. Create an account. Before you start, you would need a Google Optimize account. You can create one for free at https://optimize.google.com.
    2. Log in. Log in to the system and go to “Create a New Container”, you can name this anything you like. “FirstOptimize” is a good go.
    3. Create an Experiment. On the next page, you will see where to “Create your first experience”. In order to start properly, you should log in the following parameters:

    Editor Page: HTTP://localhost.com:3000

    Name: My first experiment

    If Optimize doesn’t function on your localhost, then you would need to edit your hosts file on your computer in order to create an alias. In order to do so, you need to open the following file:

    c:\windows\system32\drivers\etc\hosts

    You can do that by simply running Notepad as administrator, going to >file> Open a file and typing in the address. If you are running a different operating system than Windows, it might be a bit trickier but you can read here how to do it on all. (Linux, macOS and Windows).

    4. Create a variant. When you create a variant, it will get automatically named by default as “Variant 1”. Now is the time to link your GA (Google Analytics) account to Optimize. After you’ve done so, a script modal with the tag <script> will pop up. You have to add this section to your app. The <script> should look something like this.

    Replace YOUR_GA_ID and OPTIMIZE_ID with your Google Analytics account id and your Google Optimize account ID. Then add the script to your index.html file. Make sure to add it between <head> tags.

     

    Once you’ve done all that, double-check the two IDs and you’ve added the tag  <script> to the React app, jump to the dashboard in Google Optimize and choose a primary objective for the experiment. You can read the entire comprehensive guide on that, written by Google’s support – Here. The Screen to choose an Objective for your experiment should look like this:

    Google Optimize
    Google Optimize Experiment Objective, Courtesy of Support Google

    Custom objectives can also be created but that’s another topic. If that is your goal, you can read the guide on that – here. After you’ve chosen an objective, for example, Pageviews, Scroll all the way down on the dashboard side and find “Settings”, hit it and click “Run Diagnostics”. The Diagnostics should tell you whether the <script> tag was added properly to the system.

    If an error pops out or points out something is off, retrace the steps until here or search for the cause of the exact error.

    It’s Time To Run Your Google Optimize Experiment

    After the Variant is created, now let’s edit it. Scroll back up to the place where you can see your Variant 1 on the dashboard and click on the “Edit” button on the right.

    Edit Variant
    Edit Variant, Google Optimize, Image courtesy of Google Support

    Once you’ve done that, Google Optimize will take you to a place called “Google Optimize editor” which allows us to change everything like HTML, styles, text, and other things. Let’s change the simplest thing, for starters. Go ahead and click on the text and click “Edit Element”. Then click “Edit HTML”.

    Now you can change the text to say whatever you want. Let’s go with “The Experiment is working.” Ensure that you save the changes to the editor. On the top of the page, you should see a START button. Press it and go to localhost.com:3000 and see for yourself that your app is running.

    Can you do that without the Google Optimize Editor?

    If you’re going to edit more than copy, you might want to hide and show some components in your React app. Well, when you are creating an experiment you can scroll down to the bottom and change the activation event to “Custom”. This particular action allows you to specify exactly when the experiment should start in our React app. Go to the componentDidMount lifecycle method and add these lines of code.

    // omitted the rest of the component...  
      async componentDidMount() {
        if (window.dataLayer) {
          await window.dataLayer.push({ event: "optimize.activate" });
        }
        this.intervalId = setInterval(() => {
          if (window.google_optimize !== undefined) {
            const variant = window.google_optimize.get(YOUR_EXPERIMENT_ID_GOES_HERE);
            this.setState({ variant });
            clearInterval(this.intervalId);
          }
        }, 100);
      }
    
    // render goes here...

    If you’re wondering what’s going on in here, the first thing to check in the componendDidMount is whether the Google dataLayer array is working and exists when our component mounts. In the case that it does, the optimize.activate event is forced and pushed to the dataLayer. This activates Google Optimize.

    The setInterval line makes sure to constantly check when google_optimize is available on the window since we don’t know. When it is available, the experiment ID (Which we placed in the dashboard of Google Optimize). If you’re thinking binary, you guessed it, this either results in returning a 0 or a 1 and determines what variant to show in the end.

    This specific example is designed to show whether a component is hidden or showing, and the 0 or 1 is used to hide/show the component.  Thereafter, the variant is added to the local state and it clears the interval.

    Conclusion

    Voila, you’ve successfully set up Google Optimize to create a variant for you! You can use it anywhere you like in the application. Thank you for reading, and good luck with your own app’s A/B testing.