This website works best with JavaScript enabled. Learn how to enable JavaScript.

Amplitude

Last updated

Integrating VWO with Amplitude web analytics allows you to push and monitor your website visitor data. The integration process involves the following steps:

  1. Adding a code snippet to campaign pages
  2. Finding your VWO Test ID

Adding VWO Code to Test Pages

  1. Add the following code snippet to the pages you want to track. The code snippet works with both Synchronous and Asynchronous code of VWO, regardless of the location.
    <script type = "text/javascript">
    (function() {
    window.VWO = window.VWO || [];
    window.integrationCallbacks = window.integrationCallbacks || [];

    var identify = null,
    config = {
    campaignTypesToPushDataFor: [
    'VISUAL_AB', // AB Campaign
    'VISUAL', // MVT Campaign
    'SPLIT_URL', // Split Campaign
    'SURVEY' // Survey Campaign
    ]
    };

    window.integrationCallbacks.push({
    callback: function (campaignData, isABatchProcessed) {
    // Amplitude Integration code follows
    identify = identify || new window.amplitude.Identify();
    var amplitude = window.amplitude;

    // Once a campaign is processed
    if (campaignData) {
    identify.set('VWO-Test-ID-' + campaignData.id, campaignData.combinationName);
    } else if (isABatchProcessed) { // When all campaigns are processed
    amplitude.getInstance().identify(identify);
    amplitude.getInstance().logEvent('VWO');
    //To handle SPA, and avoid logging of events multiple times where, on url change
    //amplitude does not loses context of campaigns from previous page.
    identify = null;
    }
    },
    apiAvailabilityCheck: function () {
    return window.amplitude;
    }
    });

    //DO NOT CHANGE BELOW THIS LINE
    var integrationCallbacks = window.integrationCallbacks,
    tryPushingDataTimer;

    // Poll for the integration library API and then call the callback to send data
    function checkAndIntegrate(apiAvailabilityCheck, callback, campaignMetaInfo, isABatchProcessed) {
    if (!callback) {
    throw 'callback not defined';
    }
    var timeout = 1;
    if (!apiAvailabilityCheck()) {
    clearTimeout(tryPushingDataTimer);
    tryPushingDataTimer = setTimeout(function() {
    checkAndIntegrate(apiAvailabilityCheck, callback, campaignMetaInfo, isABatchProcessed);
    }, timeout);
    return;
    }
    if (isABatchProcessed) {
    setTimeout(function () {
    callback(campaignMetaInfo, isABatchProcessed);
    }, timeout);
    } else {
    callback(campaignMetaInfo, isABatchProcessed);
    }
    }

    function whenABatchProcessed() {
    for (var i = 0; i < integrationCallbacks.length; i++) {
    checkAndIntegrate(integrationCallbacks[i].apiAvailabilityCheck, integrationCallbacks[i].callback, null, true);
    }
    }

    var debouncedWhenABatchProcessed;

    window.VWO.push([
    'onVariationApplied',
    function(data) {
    try {
    var campaignId = data[1],
    campaignDetailedInfo = window._vwo_exp[campaignId],
    combinationChosen = data[2];

    var campaignMetaInfo = {
    id: data[1],
    type: campaignDetailedInfo.type,
    combinationName: campaignDetailedInfo.comb_n[combinationChosen]
    };

    debouncedWhenABatchProcessed = debouncedWhenABatchProcessed || VWO._.utils.debounce(function () {
    whenABatchProcessed();
    }, 1);

    if (
    typeof combinationChosen !== 'undefined' &&
    config.campaignTypesToPushDataFor.indexOf(campaignMetaInfo.type) > -1
    ) {
    for (var i = 0; i < integrationCallbacks.length; i++) {
    checkAndIntegrate(integrationCallbacks[i].apiAvailabilityCheck, integrationCallbacks[i].callback, campaignMetaInfo);
    }
    debouncedWhenABatchProcessed();
    }
    } catch (e) {}
    }
    ]);
    })();
    </script>

  2. After adding the VWO code to the website:
    1. Sign in to the Amplitude dashboard, and then click the Browse tab.
    2. Select Create Chart on the upper-right side of the dashboard.
    3. Select the visitor data, such as Event Segmentation, you want to push. In the Events column, select VWO.
    4. In the user performance column, create a segment for Control and Variation-1 where the user property is VWO-Test-ID(XX) = Control, Variation-1.
    5. To finalize the integration, click Save.

Finding Your VWO Test ID

To view campaign/test ID in the VWO dashboard:

  1. From the dashboard, select the test for which you want to view the ID.
  2. On the details page, select Settings > Summary.
  3. To view the Test ID, go to the Other Information section of the page.

Was this article helpful?

Thanks for your feedback!
Please email us at support@vwo.com to tell us what you were looking for. We'll send the answer to your inbox.

Contact Us / Login