Before you can start your A/B tests within the Order Protection app, you need to configure a few settings.

1

Enable a New Custom Pixel

From Settings, click on Customer Events.

Once in the Customer Events settings, click Add custom pixel. Name it “Order Protection A/B Testing” or something similar to know the testing is originating in the OP app.

2

Add the Code Script

Once the pixel is added, add the custom script below.

expandable
analytics.subscribe("checkout_completed", async (event) => {
    async function hasActiveTest() {
        const request = await fetch(
            `https://api.production.orderprotection.com/v1/tests?store=${event.context.document.location.host}`
        );

        if (!request.ok) {
            return false;
        }

        const requestData = await request.json();

        return requestData.active;
    }

    function transformSettings(settings) {
        return {
            variants: settings.variants,
            settings: {
                default_op: settings.automaticallyAddToCart,
                dynamic_price: true,
                dynamic_price_range: settings.rules.map((rule) => {
                    const term = rule.terms.customer ? rule.terms.customer : rule.terms.brand
                    return {
                        value: rule.min * 100,
                        max: rule.max * 100,
                        insuranceCost:
                            term.type === "percentage" ? term.amount : term.amount * 100,
                        isPercentage: term.type === "percentage",
                        paidBy: rule.terms.customer ? "customer" : "brand",
                    };
                }),
                splitTestSettings: settings.splitTestSettings || null,
            },
        };
    }

    async function hasViewedWidget(store_settings) {
        const response = await fetch(
            `https://api.production.orderprotection.com/v1/tests/${store_settings.settings.splitTestSettings.id}/${store_settings.settings.splitTestSettings.token}`
        );

        if (!response.ok) {
            return false;
        }

        const responseData = await response.json()

        return responseData
    }

    async function fetchStoreSettings() {
        const response = await fetch(
            `https://api.production.orderprotection.com/v1/quote/insurance?store_url=${event.context.document.location.host}`
        );

        const store_settings = await response.json();

        return transformSettings(store_settings);
    }

    async function initSplitTest() {
        const hasSplitTest = await hasActiveTest();
        const store_settings = await fetchStoreSettings();
        const viewedWidget = await hasViewedWidget(store_settings);
        const purchasedOp = event.data.checkout.lineItems.some((item) => item.variant.product.vendor === 'Order Protection')
        const orderId = event.data.checkout.order.id

        if (!!hasSplitTest && !!store_settings.settings.splitTestSettings && !!viewedWidget) {
            await fetch(`https://api.production.orderprotection.com/v1/tests/event`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    type: "checkout:completed",
                    testId: store_settings.settings.splitTestSettings.id,
                    sessionId: store_settings.settings.splitTestSettings.token,
                    metadata: {
                        isOriginal: store_settings.settings.splitTestSettings.isOriginal,
                        settingsType: store_settings.settings.splitTestSettings.type,
                        orderId,
                        purchasedOp,
                    },
                }),
            });
        }
    }
    initSplitTest()
});

It should look something like this.

Before you save the file, you need to swap out the following code ${event.context.document.location.host} with your Shopify store URL. This can be found at the top of the left navigation in settings as well as at the top of the current custom pixel page you are populating. This URL could be {store_name}.myshopify.com or some custom name that you have set. Save the custom pixel and you’re done! 🙌

3

Starting an A/B Test in the Order Protection App

Now that you have configured your custom pixel, you’re ready to start A/B testing. Log back in to app.orderprotection.com, navigate to to the A/B Tests tab in the left navigation and click on Start New Test to get started. Session data will start rolling into the test analytics within a few minutes. Expect 1-2 weeks for results to reach statistical significance depending on your store traffic volume.