Skip to content
Google Analytics Experiment selector for Kentico Cloud
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
components
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
analytics_logo.png
config.json
index.pug
initialValue.json
selector.tsx
style.less

README.md

Google Analytics Experiment selector for Kentico Cloud

Stack Overflow

This repository contains source code of Bynder image selector custom element for Kentico Cloud

Use

If you want to use Google Analytics Experiment selector in your project in Kentico Cloud, follow these steps:

  • In Kentico Cloud open Content models tab
  • Open / create a content model to which you want to add Google Optimize Experiment selector
  • Add Custom element content element
  • Open configuration of the content element
  • Use following URL as Hosted code URL (HTTPS): https://kentico.github.io/custom-element-samples/GoogleAnalyticsExperiments/experiment-selector.html
  • Provide the following JSON parameters for the custom element to connect it to your Google Analytics, replace the macros with the actual values for your setup
{
  "clientId": "<YOUR GOOGLE APP CLIENT ID>.apps.googleusercontent.com",
  "accountId": "<YOUR GOOGLE ANALYTICS ACCOUNT ID>",
  "webPropertyId": "<YOUR GOOGLE ANALYTICS PROPERTY ID>",
  "profileId": "<YOUR GOOGLE ANALYTICS PROFILE ID>"
}

Example output

The element will save a value containing the experiment/variant identifier as well as metadata need for first display of the selector.

[
  "YI5uxeAkRZ-0E1-7oQ5FXg/2",
  {
    "experiment": {
      "id": "YI5uxeAkRZ-0E1-7oQ5FXg",
      "key": "190562962-3",
      "name": "Home page A/B test"
    },
    "variant": {
      "id": "2",
      "name": "Try Premium"
    }
  }
]

The experiment/variant identifier is at the beginning of the value so that the content items can be filtered based on the prefix of the value.

Installation

If you want to adjust the implementation, first download Kentico Cloud Custom Elements Devkit. This repository should be positioned within /client/custom-elements folder. For further instructions on devkit implementation, please refer to Custom Element Devkit README.

Get started

Prerequisites:

  • Node.js
  • git
git clone https://github.com/Kentico/custom-element-devkit.git
cd custom-element-devkit
git clone https://github.com/Kentico/cloud-custom-element-sample-ga-experiments.git ./client/custom-elements/cloud-custom-element-sample-ga-experiments
npm install --save react@^16.8.6 react-dom@^16.8.6 react-select@^2.4.3
npm start -- -hw

Browse: https://localhost:3000/custom-elements/cloud-custom-element-sample-ga-experiments/wrap

Live site implementation sample

If you want to see live site example of AB Testing used on the live site, browse to a deployed sample site.

See source code of the sample site implementation here.

Analytics

You can’t perform that action at this time.