https://github.com/collaborne/app-experiment-behavior

Polymer behavior for simple A/B/... experiments
https://github.com/collaborne/app-experiment-behavior

polymer

Last synced: about 2 months ago
JSON representation

Polymer behavior for simple A/B/... experiments

• Host: GitHub
• URL: https://github.com/collaborne/app-experiment-behavior
• Owner: Collaborne
• License: apache-2.0
• Created: 2017-05-12T13:50:28.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-11-21T13:15:33.000Z (over 6 years ago)
• Last Synced: 2025-03-15T15:08:04.103Z (2 months ago)
• Topics: polymer
• Language: HTML
• Homepage: https://www.webcomponents.org/element/Collaborne/app-experiment-behavior
• Size: 22.5 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# app-experiment-behavior [![Bower version](https://badge.fury.io/bo/app-experiment-behavior.svg)](http://badge.fury.io/bo/app-experiment-behavior) [![Build Status](https://travis-ci.org/Collaborne/app-experiment-behavior.svg?branch=master)](https://travis-ci.org/Collaborne/app-experiment-behavior) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Collaborne/app-experiment-behavior)

[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/Collaborneapp-experiment-behavior)

[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/Collaborneapp-experiment-behavior.svg)](https://vaadin.com/directory/component/Collaborneapp-experiment-behavior)

Polymer behavior for simple A/B/... experiments

### Usage

**See this [blog post](https://medium.com/collaborne-engineering/a-b-testing-made-easy-with-polymer-7038b22779af) for a detailed tutorial.**

Using this behavior is (fairly) easy:

`bower install app-experiment-behavior`

After that you need to reference the behavior and provide the viewer information for your component:

```html

	

		

			:host {

				margin: 2em;

			}

		

		
[[_greeting]]

	


	

		// Simple example for how to set the oracle with a custom extraction function.

		const oracle = Polymer.AppExperiment.Oracle.VIEWER_HASH(viewerId => viewerId);

		Polymer({

			is: 'experiment-component',

			properties: {

				experimentViewer: String,

				_greeting: {

					type: String,

					computed: '_computeGreeting(experiment)'

				}

			},

			behaviors: [

				Polymer.AppExperiment.Behavior('experiment-component:greeting', [ 'world', 'universe' ], { oracle })

			],

			_computeGreeting(experiment) {

				const greetings = {

					'world': 'Hello, World!',

					'universe': 'Jo, Universe!'

				}

				return greetings[experiment];

			}

		})

	

```

In this example the component provides the 'experimentViewer' property directly, but this could be extracted into a separate behavior, allowing you to simplify code in your app even more:

```js

const MyViewerBehavior = {

	properties: {

		experimentViewer: {

			type: Object,

			computed: '_computeExperimentViewer(...)'

		},

	},

	_computeExperimentViewer(...) {

		// Calculate the viewer based on the given inputs

	}

};

function MyExperimentBehavior() {

	return [...Polymer.AppExperimentBehavior.apply(this, arguments), MyViewerBehavior ];

}

```