In order to make any tools (AB Tasty, Optimizely, VWO, Convert etc) work with your site, you need to insert a snippet (it may have a different name in different tools, like tag, Smartcode etc).

Every tool works hard to ensure that the snippet delivers the best possible experience for visitors to your site, but a few best practices can help ensure optimal site performance. As we are concerned about performance issues or page flickering. We have created this best practice guidance to install the snippet.

Below guidance can improve your testing performance:

 

Snippet placement:

Place the code in the <head> section of your pages so changes are displayed more quickly. Otherwise, a flickering effect may occur: your visitors may see the original page for a fraction of a second before they see the modified page. By calling snippet as high in the source code of your page as possible, our script can apply the changes before the content is displayed.

  • Place the snippet as the first script tag in the head of the page, but after all charset declarations, meta tags, and CSS inclusions.

Note: If jQuery is already included natively on your site, place the snippet directly after the jQuery.

 

Snippet load:

You should not install snippet through tag managers such as Google Tag Manager. By default, all the tag managers load snippet code asynchronously, which may cause page flicker on the test pages. Also, using tag managers may lead to delayed loading of the snippet code, which can cause time-out issues and prevent visitors from becoming part of the test.

  • Include the snippet directly in HTML<head> tag. Don’t deliver the snippet via any tag managers or inject it via client-side scripting.

 

Snippet type:

The snippet generally comes in two versions: synchronous and asynchronous. Installing the snippet synchronously helps prevent page flickering. Asynchronous loading eliminates any delay in page load times but greatly increases the chances of flashing. You can learn more about synchronous and asynchronous snippet loading, including the strengths and drawbacks of both load types.

In most cases, most of the tools recommend using the synchronous snippet. If the snippet is placed in your site’s <head> tag, you’ll be sure that your modifications will be applied immediately, before the site loads. This will avoid the flickering effect, and offer the best user experience.

  • Use the synchronous snippet

Note: Few tools recommend using the asynchronous snippet, like VWO. Before using synchronous or asynchronous snippet please have a look on advantage and disadvantage from that specific tool’s documentation.

 

Use preconnect and preload:

Add preconnect and preload tags at the top of the head for faster synchronous loading. We recommend using preconnect to open a connection to the server of specific tools to event endpoint, ahead of time.

  • Use preconnect and preload tags

In the example below, replace “http://dev.visualwebsiteoptimizer.com/lib/2965490.js” with your snippet and “//dev.visualwebsiteoptimizer.com” with the server of your tool.

 

You can find the server address from to preconnect from asking the customer support of specific tools. Bellow adding few server addresses for specific tools that might help you.

Optimizely: //logx.optimizely.com

VWO: //dev.visualwebsiteoptimizer.com

AB Tasty: //ariane.abtasty.com/

Convert: //logs.convertexperiments.com

 

Minimize the number of pages and events:

In a few tools, all pages and events are included in the basic snippet that increases the size of the snippet. To keep the overall snippet size small, avoid creating pages where you don’t expect to run experiments, and archive any unused pages, events and experiments.

  • Minimize the number of pages, events and experiments.

 

Use analytics:

Use an analytics tool to identify traffic that represents your visitors so you can optimize your site for the majority of people who visit. For example, if you find that most of your traffic is from mobile devices, you can target your experiments for mobile users.

  • Use analytics to target your testing

 

Best practice documentation:

Every tool has its own documentation to implement the snippet where they mention the best practices guideline for improving site performance or strengths and drawbacks of various implementation type. Don’t forget to have a look at that because they might have a few more recommendation. Read the documentation carefully and implement it in a way that fulfils your requirements.

  • Read tools specific documentation.

Summary:

  • Place the snippet as the first script tag in the head of the page, but after all charset declarations, meta tags, and CSS inclusions.
  • Include the snippet directly in HTML<head> tag. Don’t deliver the snippet via any tag managers or inject it via client-side scripting.
  • Use the synchronous snippet
  • Use preconnect and preload tags
  • Minimize the number of pages, events and experiments.
  • Use analytics to target your testing
  • Read tools specific documentation.

Best practices to implement the snippet of AB testing tools

No comments yet

In order to make any tools (AB Tasty, Optimizely, VWO, Convert etc) work with your site, you need to insert a snippet (it may have a different name in different tools, like tag, Smartcode etc).

Every tool works hard to ensure that the snippet delivers the best possible experience for visitors to your site, but a few best practices can help ensure optimal site performance. As we are concerned about performance issues or page flickering. We have created this best practice guidance to install the snippet.

Below guidance can improve your testing performance:

 

Snippet placement:

Place the code in the <head> section of your pages so changes are displayed more quickly. Otherwise, a flickering effect may occur: your visitors may see the original page for a fraction of a second before they see the modified page. By calling snippet as high in the source code of your page as possible, our script can apply the changes before the content is displayed.

  • Place the snippet as the first script tag in the head of the page, but after all charset declarations, meta tags, and CSS inclusions.

Note: If jQuery is already included natively on your site, place the snippet directly after the jQuery.

 

Snippet load:

You should not install snippet through tag managers such as Google Tag Manager. By default, all the tag managers load snippet code asynchronously, which may cause page flicker on the test pages. Also, using tag managers may lead to delayed loading of the snippet code, which can cause time-out issues and prevent visitors from becoming part of the test.

  • Include the snippet directly in HTML<head> tag. Don’t deliver the snippet via any tag managers or inject it via client-side scripting.

 

Snippet type:

The snippet generally comes in two versions: synchronous and asynchronous. Installing the snippet synchronously helps prevent page flickering. Asynchronous loading eliminates any delay in page load times but greatly increases the chances of flashing. You can learn more about synchronous and asynchronous snippet loading, including the strengths and drawbacks of both load types.

In most cases, most of the tools recommend using the synchronous snippet. If the snippet is placed in your site’s <head> tag, you’ll be sure that your modifications will be applied immediately, before the site loads. This will avoid the flickering effect, and offer the best user experience.

  • Use the synchronous snippet

Note: Few tools recommend using the asynchronous snippet, like VWO. Before using synchronous or asynchronous snippet please have a look on advantage and disadvantage from that specific tool’s documentation.

 

Use preconnect and preload:

Add preconnect and preload tags at the top of the head for faster synchronous loading. We recommend using preconnect to open a connection to the server of specific tools to event endpoint, ahead of time.

  • Use preconnect and preload tags

In the example below, replace “http://dev.visualwebsiteoptimizer.com/lib/2965490.js” with your snippet and “//dev.visualwebsiteoptimizer.com” with the server of your tool.

 

You can find the server address from to preconnect from asking the customer support of specific tools. Bellow adding few server addresses for specific tools that might help you.

Optimizely: //logx.optimizely.com

VWO: //dev.visualwebsiteoptimizer.com

AB Tasty: //ariane.abtasty.com/

Convert: //logs.convertexperiments.com

 

Minimize the number of pages and events:

In a few tools, all pages and events are included in the basic snippet that increases the size of the snippet. To keep the overall snippet size small, avoid creating pages where you don’t expect to run experiments, and archive any unused pages, events and experiments.

  • Minimize the number of pages, events and experiments.

 

Use analytics:

Use an analytics tool to identify traffic that represents your visitors so you can optimize your site for the majority of people who visit. For example, if you find that most of your traffic is from mobile devices, you can target your experiments for mobile users.

  • Use analytics to target your testing

 

Best practice documentation:

Every tool has its own documentation to implement the snippet where they mention the best practices guideline for improving site performance or strengths and drawbacks of various implementation type. Don’t forget to have a look at that because they might have a few more recommendation. Read the documentation carefully and implement it in a way that fulfils your requirements.

  • Read tools specific documentation.

Summary:

  • Place the snippet as the first script tag in the head of the page, but after all charset declarations, meta tags, and CSS inclusions.
  • Include the snippet directly in HTML<head> tag. Don’t deliver the snippet via any tag managers or inject it via client-side scripting.
  • Use the synchronous snippet
  • Use preconnect and preload tags
  • Minimize the number of pages, events and experiments.
  • Use analytics to target your testing
  • Read tools specific documentation.

AB test development within Optimizely is delightful and seamless. Front end testing development has few similarities with the conventional front-end development work. However, the most important thing is the goals or metrics that decide the result of the test. We need to do proper QA/Troubleshoot to check each goal; that they are working as expected as otherwise, the whole development of the testing work would be meaningless.

We work hard to make a test work in properly, but sometimes technology doesn’t work the way you expect it to. In this article, I have provided a list of five options that Optimizely provides to troubleshoot your experiment or campaign.

Tools for QA:

  • Preview tool: helps you check the experiments and campaigns functionality visual changes for different audiences and events fire details.
  • JavaScript API: helps you verify what live experiments and campaigns are running on a page and which variation you’re bucketed into.
  • Network console: helps you verify whether events in a live experiment or campaign are firing correctly.
  • Optimizely’s cookies and localStorage: helps you to uniquely identify visitors, track their actions, and deliver consistent experiences across page loads.
  • Optimizely log: helps you diagnose more difficult issues in a live experiment or campaign. It tells you about the activated experiment or campaign on the page, qualified audience, applied changes on a page and even events that are fired on each action.

Among all of them, I will say the Optimizely log is your best friend. This log contains all the information that developers need for troubleshooting experiments, segments, audiences, goals and code execution on page load.

I would like to discuss this Optimizely log with a few examples. If your requirements do not serve with this, you can go with other options available in the above links.

Optimizely log:

The Optimizely log allows you to “read Optimizely’s mind” by printing the execution of targeting and activation decisions, variation changes, events, and third-party integrations on a page in your browser’s console.

Use the Optimizely log to investigate all kind of issues, even those issues that you can’t easily diagnose. For goals QA, it is the best weapon in Optimizely.

The log can help you to check:

  • Is an experiment or campaign loading correctly?
  • Is the user qualified for an audience condition?
  • Are the changes you made, applied on the page?
  • Is the page activated on the URL(or specific condition)?
  • Is a click/custom goal fired?

You can check all of this with the Optimizely log. But here; I will show the example for page activation (Pageview goals) and click/custom goal.

You can access the log in two ways:

  1. With a query parameter: Add this query parameter to the URL and reload, boom!!
optimizely_log=info
  1. With the JavaScript API: Paste it to browser console and hit enter.
window.optimizely.push('log');

This will then return something like:

For pageview / click/ custom goal filter the console with “Optly / Track”. I have highlighted on the bellow screenshot for click/pageview/custom goals simultaneously.

For custom segments/attributes filter the console with “Optly / API”. I have highlighted on the below screenshot for custom segments.

Remember; custom segments could only fire once for a session. So, you might need to check in a new private window each time; to see the custom segments are working.

Reference: If you specifically troubleshoot for the audience, page, campaign, traffic allocation & bucketing, variation code and click/custom goals visit here.

Troubleshooting and Goals QA in Optimizely: Part 1

No comments yet

AB test development within Optimizely is delightful and seamless. Front end testing development has few similarities with the conventional front-end development work. However, the most important thing is the goals or metrics that decide the result of the test. We need to do proper QA/Troubleshoot to check each goal; that they are working as expected as otherwise, the whole development of the testing work would be meaningless.

We work hard to make a test work in properly, but sometimes technology doesn’t work the way you expect it to. In this article, I have provided a list of five options that Optimizely provides to troubleshoot your experiment or campaign.

Tools for QA:

  • Preview tool: helps you check the experiments and campaigns functionality visual changes for different audiences and events fire details.
  • JavaScript API: helps you verify what live experiments and campaigns are running on a page and which variation you’re bucketed into.
  • Network console: helps you verify whether events in a live experiment or campaign are firing correctly.
  • Optimizely’s cookies and localStorage: helps you to uniquely identify visitors, track their actions, and deliver consistent experiences across page loads.
  • Optimizely log: helps you diagnose more difficult issues in a live experiment or campaign. It tells you about the activated experiment or campaign on the page, qualified audience, applied changes on a page and even events that are fired on each action.

Among all of them, I will say the Optimizely log is your best friend. This log contains all the information that developers need for troubleshooting experiments, segments, audiences, goals and code execution on page load.

I would like to discuss this Optimizely log with a few examples. If your requirements do not serve with this, you can go with other options available in the above links.

Optimizely log:

The Optimizely log allows you to “read Optimizely’s mind” by printing the execution of targeting and activation decisions, variation changes, events, and third-party integrations on a page in your browser’s console.

Use the Optimizely log to investigate all kind of issues, even those issues that you can’t easily diagnose. For goals QA, it is the best weapon in Optimizely.

The log can help you to check:

  • Is an experiment or campaign loading correctly?
  • Is the user qualified for an audience condition?
  • Are the changes you made, applied on the page?
  • Is the page activated on the URL(or specific condition)?
  • Is a click/custom goal fired?

You can check all of this with the Optimizely log. But here; I will show the example for page activation (Pageview goals) and click/custom goal.

You can access the log in two ways:

  1. With a query parameter: Add this query parameter to the URL and reload, boom!!
optimizely_log=info
  1. With the JavaScript API: Paste it to browser console and hit enter.
window.optimizely.push('log');

This will then return something like:

For pageview / click/ custom goal filter the console with “Optly / Track”. I have highlighted on the bellow screenshot for click/pageview/custom goals simultaneously.

For custom segments/attributes filter the console with “Optly / API”. I have highlighted on the below screenshot for custom segments.

Remember; custom segments could only fire once for a session. So, you might need to check in a new private window each time; to see the custom segments are working.

Reference: If you specifically troubleshoot for the audience, page, campaign, traffic allocation & bucketing, variation code and click/custom goals visit here.