Google Optimize

Google Optimize integration for Shogun Frontend.

Personalize your site. Reap the rewards.

Google Optimize website →

Google Optimize developer docs →

Installation

yarn add @sunrise-integration/google-optimize

npm install @sunrise-integration/google-optimize

Requirements

You will need a Google Analytics, Google Tag Manager and Google Optimize account

1. Follow these instructions to set up your Google Tag Manager account. Do not install the script, it will be injected through the @frontend-sdk/google-tag-manager package

2. Follow these instructions to set up your Google Analytics account with a property and data stream

3. Go to Tagging Instructions -> Use existing on-page tag -> Google Tag Manager and follow the instructions.

4. Configure a Google Optimize experiment to acquire a optimizeContainerId

Usage

1. Initialize Google Optimize with the useGoogleOptimize hook by passing your optimizeContainerID provided by Google Optimize.

2. Events can be fired with the useGoogleOptimizeEvent(eventName = 'optimize.activate', options = {}) hook. You may pass a custom event name otherwise the optimize.activate event will be fired.

Instantiate Google Tag Manager and Google Optimize:

import {useGoogleTagManager} from '@frontend-sdk/google-tag-manager'
import {useGoogleOptimize} from '@sunrise-integration/google-optimize'

const App = () => {
    const optimizeContainerId = 'OPT-XXXXXXX';
    useGoogleTagManager({
        containerId: 'GTM-XXXXXXX',
        gaSessionId: `${new Date().getTime()}`,
        optimizeContainerId: optimizeContainerId,
    })
    useGoogleOptimize(optimizeContainerId);
    return <div>...</div>
}

Firing the default optimize.activate event on a page:

import {useGoogleOptimizeEvent} from '@sunrise-integration/google-optimize'

const Page = () => {
    useGoogleOptimizeEvent(); // By Default it will call optimize.activate event
    return <div>...</div>
}

Firing a custom event named custom-event-name with options on a page:

import {useGoogleOptimizeEvent} from '@sunrise-integration/google-optimize'

const Page = () => {
    useGoogleOptimizeEvent('custom-event-name', {
      'experiment_id': 'experimentId',
      'variant_id': 'variationId',
      'send_to': 'GA_MEASUREMENT_ID',
    });
    return <div>...</div>
}