Taplytics

The Taplytics Documentation Center

Welcome to the Taplytics Docs Center. You'll find comprehensive guides, documentation and reference materials to help you start working with Taplytics as quickly as possible. To find some answers to your questions, please see our commonly asked questions below, ask our community, or you can search for an answer. Let's jump right in!

Get Started    Community

1a. How to Use the Web Visual Editor

To start, ensure that the Taplytics JS SDK has been installed on your website and you have a project set up.


Visual Web Editor

Making changes to your website is easy using Taplytics Visual Web Editing tool.

The first step get the Taplytics Chrome Extension installed on your browser you're good to go! All you need to do is provide a google email address and then download the Taplytics Chrome Web Extension. From there you'll be able to make edits directly from on your website.

Note: please provide a Google account email address and be logged in Chrome with that email address to be able to use Taplytics Chrome Extension.


Create your experiment

Once you're on the Taplytics Dashboard navigate to the "Create New Experiment" button.


Setup your experiment


Making Visual Edits

On the next screen you'll be prompted to put your website URL into the Dashboard. Go ahead and click the "Start Editing" button once it lights up!

You'll then be redirected to your website! Once there you'll see the a border around the screen that let's you know you're now using the visual editing tool.

There are a few things to note about this once you've landed on the first screen.

1 : Add new variations or switch between different variations to edit here.

2 : These buttons open the CSS and JavaScript editors (left to right).

3: This button shows the history of your changes and you can also remove changes

4 : Toggle between Browse and Edit to navigate the page and make edits to the page

Once you've navigated to the page you'd like to make changes on, you are now ready to do "Live Edit" mode and you'll notice that as you hover over different parts of the webpage a box will show up around the corresponding element.

To start making changes, click on one of these boxes! Once you've clicked an "Editing Text" box will appear. This is where you will make edits to your website.


Editing Text or HTML

You can simply update the text within the Text box or click on Advanced to see the actual HTML. If you'd like to update the font or colour - simply add the correct CSS modifiers to enable the changes you'd like.


Layout

In the Editor panel, there is a section called "Layout". This section allows you to arrange elements on your site without touching any code.

  1. Select the element you wish to edit
  2. Choose the rule of the Arrangement (before or after)
  3. Select the element that you want to Arrange it with

Don't forget to hit save!

It also gives you the ability to Show, Hide or Delete an element by clicking the display icon.

  1. Show Element
  2. Hide Element
  3. Delete Element

Once all your changes have been made and you're done adding variations hit the "Save Edits" button in the top right hand corner of the screen and you'll be taken back to the Taplytics Experimentation Dashboard.


Editing Images

You can also use the web editor to swap images! Simply select the image and update the URL that you'd like to swap the image for.


CSS Editor

Use the editor to make CSS changes to the page and its elements. You may always come back to a variation and change the CSS you’ve written.


JavaScript Editor

Use this editor to write and run JavaScript. The script will be executed upon hitting Save. Note: To cancel changes made by the JS editor, you may need to delete the variation.

That's it! You've created your first visual experiment using the Taplytics Web Visual Editor! Learn more about URL targeting below to apply the edits you've made to multiple pages.


Targeting Rules

Targeting Rules allow you to pick and choose exactly where your web Experiments should run. Once you have finished setting up your Experiments using the Taplytics Web Visual Editor, scroll down to the Targeting Rules section within the Visual Editor tab to start defining your URL Targeting Rules.

Once you click on “+ Add Rule”, you will be taken to a modal where you can enter the targeting rule’s Type and Value. If no rules are set, the changes you make within the Web Visual Editor will only be applied to the URL in which you have setup your Experiment.


Here are some example Targeting Rules for each match type given that we want to target this link: https://taplytics.com/blog/moving-faster-together-introducing-the-new-taplytics-ui/

Matches Regex

Value is a Regular Expression that matches the URL.

Does Not Match Regex

Opposite of the above; will match on all URLs that DO NOT match the Regular Expression being used

Is

Value must match the exact URL

Is Not

Value must not match the exact URL

Contains

Value matches the exact URL or contains a substring of the URL

Does Not Contain

Value does not match the URL nor exist in any substring of the URL

📘

Sharing Your Work

Once you are done setting up your Web experiment, you can share your work with a team member using QA URLs. For more information, visit our QA docs here.


Keep moving through the experiment work flow!

What's next? Move to the Code Blocks and Variables tab or start creating goals!

  1. Leveraging Code Blocks and Variables (Web Code-Based Experiments)

  2. Creating Goals

  3. Specifying the Audience Distribution

  4. Reviewing the experiment set up and launching it to users!

Updated 9 days ago


1a. How to Use the Web Visual Editor


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.