stx-abtest

A simple web component for A/B testing chunks of code on your site.

Getting Started

1. Include stxabtest.js in your HTML file

• via a script tag (quickest)

<script src="https://unpkg.com/stx-abtest@latest/dist/abtest.js"></script>

• or via a node module

npm install stx-abtest --save

Then add a script tag to your HTML like so:

 <script src='node_modules/stx-abtest/dist/abtest.js></script>

1. Add this tag to your HTML

<stx-abtest>
    <div slot="A">
        <!-- Test A HTML goes here -->
    </div>
 
    <div slot="B">
        <!-- Test B HTML goes here -->
    </div>    
</stx-abtest>

The component renders either the A or B case. NOTE: It actually adds both to the DOM but only shows one at random.

1. Forcing a side

To force a side, either A or B then you can also provide the query param __side with a value of A or B.

e.g. http://example.com?__side=A will render the A test all the time.

Working on stx-abtest

This component was built using stenciljs.com

To setup run:

npm install
npm start

To view the build, start an HTTP server inside of the /www directory.

To watch for file changes during develop, run:

npm run dev

To build the app for production, run:

npm run build