Is google experiments API available in analytics.js?

191 Views Asked by At

We try to set up google experiments to work with our backend setup and found that there is API for letting GA know what variation we have selected to show for the user through function:

cxApi.setChosenVariation(chosenVariation, opt_experimentId);

When I visit official docs: https://developers.google.com/analytics/devguides/collection/gajs/experiments it says that: "ga.js is a legacy library. If you are starting a new implementation we recommend you use the latest version of this library, analytics.js. For exisiting implementations, learn how to migrate from ga.js to analytics.js."

We do use analytics.js.

Does it mean that all the functions present in ga.js are already in analytics.js and we do not need to worry about using this function?

1

There are 1 best solutions below

0
Jaime Montoya On

You can try the browser-only Implementation as explained at https://developers.google.com/analytics/devguides/collection/analyticsjs/experiments. Instead of ga.js or analytics.js, you can try gtag.js. Visit https://developers.google.com/analytics/devguides/collection/gtagjs/migration to learn how to migrate from analytics.js to gtag.js. I am sharing the code below of how I implemented my experiment. Remember to create the experiment in Google Analytics, you will find it in the BEHAVIOR > Experiments section. In the code below, you will need to use your own Experiment ID.

<head>
    .......................................
    .......................................
    .......................................
    <!-- Load the Content Experiment JavaScript API client for the experiment -->
    <script src="//www.google-analytics.com/cx/api.js?experiment=MY_EXPERIMENT_ID"></script>
    <script>
        // Ask Google Analytics which variation to show the user.
        var chosenVariation = cxApi.chooseVariation();
        // Define JavaScript for each page variation of this experiment.
        // Wait for the DOM to load, then execute the view for the chosen variation.
        $(document).ready(function(){
        switch (chosenVariation) {
            case 0:
                // Original: Do nothing. This will render the default HTML.
                break;
            case 1:
                //document.getElementsByClassName('logo_tagline')[0].value = 'I love programming';
                $(".logo_tagline:first").text("I love programming");
                break;
            case 2:
                //document.getElementsByClassName('logo_tagline')[0].value = 'Programming is my passion';
                $(".logo_tagline:first").text("Programming is my passion");
                break;
            case 3:
                //document.getElementsByClassName('logo_tagline')[0].value = 'I enjoy writing code';
                $(".logo_tagline:first").text("I enjoy writing code");
            }
        });
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-XXXXXXXXX-X');
    </script>
</head>