optimizely-web

Optimizely Web

Overview

This skill covers Optimizely Web (snippet-based) patterns for client-side experimentation.

Snippet Integration

Basic Setup

<!-- Add before closing </head> tag -->
<script src="https://cdn.optimizely.com/js/PROJECT_ID.js"></script>

Async Loading (Recommended)

<script async src="https://cdn.optimizely.com/js/PROJECT_ID.js"></script>

Anti-Flicker Handling

CSS-Based Anti-Flicker

<style>
  /* Hide content until Optimizely activates */
  .optimizely-pending {
    opacity: 0 !important;
  }
</style>
<script>
  document.documentElement.classList.add('optimizely-pending');

  window.optimizely = window.optimizely || [];
  window.optimizely.push({
    type: 'addListener',
    filter: { type: 'lifecycle', name: 'activated' },
    handler: function() {
      document.documentElement.classList.remove('optimizely-pending');
    }
  });

  // Fallback timeout
  setTimeout(function() {
    document.documentElement.classList.remove('optimizely-pending');
  }, 3000);
</script>

Custom JavaScript

Activate Experiment

window.optimizely = window.optimizely || [];
window.optimizely.push(['activate', 'experiment_id']);

Track Event

window.optimizely.push({
  type: 'event',
  eventName: 'purchase_completed',
  tags: {
    revenue: 9900,
    currency: 'USD'
  }
});

Get Variation

var state = window.optimizely.get('state');
var experimentId = 'EXPERIMENT_ID';
var variationId = state.getVariationMap()[experimentId];

Check Feature Flag

var state = window.optimizely.get('state');
var isEnabled = state.getDecisionString({
  campaignId: 'CAMPAIGN_ID',
  experimentId: 'EXPERIMENT_ID'
});

Page Targeting

URL Targeting Helpers

// Custom activation for SPA
window.optimizely.push({
  type: 'activate'
});

// After route change
function onRouteChange(newPath) {
  window.optimizely.push({
    type: 'page',
    pageName: newPath
  });
}