Wix is an online platform that allows brands to create a website or online store using easy drop-and-drop tools and premade templates. For more advanced users or those needing more customization features, you can add custom code right within the Wix platform using Velo by Wix. Refersion's integration uses a combination of tools in your Wix dashboard along with Velo by Wix.

Please note: This is a technical integration that requires adding new JavaScript files to your store and pasting JavaScript code snippets. If you are uncomfortable with using developer tools like Velo, we highly recommend looping in your technical team to assist with the integration.

Step 1: Add Refersion's tracking scripts to your Wix site.

In order to track clicks back to affiliates when customers visit your site, you'll need to add Refersion's click-tracking script across all pages of your website.

You can add the necessary code snippets in Wix by navigating to Settings → Advanced → Custom Code.

You'll be adding two code snippets to your store; one code snippet across all of your pages and the other code snippet only on your thank you page shown to customers after placing an order.

From the Custom Code screen, click + Add Custom Code. In the modal that appears, configure the settings for the new snippet to match the settings below:

Name: Refersion click tracking
Add code to pages: Load on each page
Place code in: Head
Code type: Marketing

In the code snippet below, replace the highlighted YOUR_PUB_KEY with your Refersion API Public Key (found in Account > Settings > Refersion API. More info on where to find your pub_key here). Once you've updated the snippet with your public key, add your code in the box labeled "Paste the code snippet here".

<!-- REFERSION TRACKING: BEGIN -->
<script>
! function(e, n, t, i, o, c, s, a) {
    e.TrackingSystemObject = "r", (s = n.createElement(t)).async = 1, s.src = "https://cdn.refersion.com/refersion.js", s.onload = function() {
        r.pubKey = "YOUR_PUB_KEY", r.settings.fp_off = !1;
        r.initializeXDLS().then(() => {
            r.launchDefault()
        })
    }, (a = n.getElementsByTagName(t)[0]).parentNode.insertBefore(s, a)
}(window, document, "script");
</script>
<!-- REFERSION TRACKING: END -->

Here is how your settings should look once everything is completed:

Save your changes and proceed.

Next, you’ll need to add Refersion’s conversion tracking script to your store. You’ll do this by creating another script using the same + Add Custom Code button.

Configure the settings for the second code snippet to match the settings below:

Name: Refersion Conversion Tracking
Add code to pages: Choose specific pages > Thank You Page
Place code in: Body - end
Code type: Marketing

Finally, copy and paste the following snippet into the "Paste the code snippet here" box and save your changes.

<!-- REFERSION CONVERSION TRACKING: BEGIN -->
<script>
if ( localStorage.getItem("rfsn_v4_aid") !== null ) {
	let pagePath = window.location.pathname;
	let orderId = pagePath.split('/').pop();
	const rfsn = {
		cart: orderId, 
		id: localStorage.getItem("rfsn_v4_id"), 
		url: window.location.href, 
		aid: localStorage.getItem("rfsn_v4_aid"), 
		cs: localStorage.getItem("rfsn_v4_cs")
	};
	r.sendCheckoutEvent(rfsn.cart, rfsn.id, rfsn.url, rfsn.aid, rfsn.cs);
}
</script>
<!-- REFERSION CONVERSION TRACKING: END -->

Below is a screenshot of what the second code snippet should look like. Be sure to set the "Code Type" in the Code Type tab as marking as well.

Step 2: Add Refersion's order tracking scripts using Velo by Wix.

In step one, you added code to your site to track clicks from affiliates and connects those clicks to orders placed by customers. Now you'll need to send the completed order data to Refersion so conversions can be created. You'll do this by following a series of steps which are outlined below:

Store your Refersion Public and Secret keys in Wix's Secrets Manager.
Enable dev mode for your store.
Add Refersion's order tracking function to your site's backend code.
Incorporate Refersion's order tracking function in your site's events file.

To get started head to your dashboard and go to Developer Tools > Secrets Manager.

In the secrets manager, you'll add two new secrets: REFERSION_PUBLIC_KEY and REFERSION_SECRET_KEY.

To add a new secret, click "Store Secret". Create one secret for your public API key and a separate one for your secret API key. As a reminder, your public and secret API keys can be found in Refersion under Account > Settings > Refersion API.

Below is an example of how you'd set up your Refersion Public Key.

When both keys are added, you should see two separate keys stored in the secrets manager:

Once this is complete, head to the site editor for your store. In the top navigation bar click "Dev Mode" to enable using Velo by Wix on your website.

Once enabled, you'll see new options on the left side of the site editor. In the left navigation bar, click on Public & Backend.

In the backend section, click the + icon to add a new file. You'll be adding a new .js file from the menu options:

Name the file refersion-order-tracking.js and hit enter to save the name.

In the new file, copy and paste the code snippet below:

import { getSecret } from 'wix-secrets-backend';
import { fetch } from 'wix-fetch';

export async function refersionOrderTracking(order) {
     try {

        // Build order data to send to Refersion's API
        let orderObject = {
            cart_id: order._id,
            order_id: order.number,
            shipping: order.totals.shipping,
            tax: order.totals.tax,
            currency_code: order.currency,
            customer: {
                first_name: order.buyerInfo.firstName,
                last_name: order.buyerInfo.lastName,
                email: order.buyerInfo.email
            },
            items: []
        };

        // Check for discounts and add to the order data object
        if (order.totals.discount > 0) {
            orderObject.discount = order.totals.discount;
            orderObject.discount_code = order.discount.appliedCoupon.code;
        }

        // Gather line item data and add each item to the order data object
        order.lineItems.forEach(item => {

            let sku = item.variantId !== '' ? item.variantId : item.productId;

            orderObject.items.push({
                sku: sku,
                quantity: item.quantity,
                price: item.price,
                name: item.name
            })
        })

        // Setup API keys for Refersion's API
        const refersionPublicKey = await getSecret("REFERSION_PUBLIC_KEY");
        const refersionSecretKey = await getSecret("REFERSION_SECRET_KEY");

        // Setup URL and fetch options for Refersion's API
        const refersionOrderTrackingURL = 'https://inbound-webhooks.refersion.com/tracker/orders/paid';
        const options = {
            method: "post",
            headers: {
                "Content-Type": "application/json",
                "Refersion-Public-Key": refersionPublicKey,
                "Refersion-Secret-Key": refersionSecretKey
            },
            body: JSON.stringify(orderObject)
        }

        // Make HTTP request and check the response
        let response = await fetch(refersionOrderTrackingURL, options)

        // Optional logging for future troubleshooting needs. Shows up in Wix's site monitoring logs.
        if (response.ok) {
            console.log({ order_data: order, refersion_response: response.json() });
        }

    } catch (error) {
        console.error(error);
    }
}

Your file should look like this:

Next, you'll need to ensure this code snippet runs when an order is paid for by a customer. You'll do this by adding Refersion's order tracking function in a special file called events.js. You can create the events file by clicking the + icon and choosing "Handle backend events" as shown in the image below:

Paste the following code snippet below all of the help text (optionally you can delete the help text if you don't need it).

import { refersionOrderTracking } from 'backend/refersion-order-tracking.js';

export async function wixStores_onOrderPaid(event) {
  refersionOrderTracking(event)
}

If your site already has an events file and that file is using the wixStores_onOrderPaid(event) function, you'll follow these instructions instead:

Past the code snippet below towards the top of your events file, but below other "import" statements, and before any other JavaScript code functions:

import { refersionOrderTracking } from 'backend/refersion-order-tracking.js';

Then within your existing wixStores_onOrderPaid(event) function, you'll add the line below after any existing code:

refersionOrderTracking(event)

Finally, you'll publish your site changes and run a test order.

If you run into issues with your test order, let us know either via in-app chat or email at [email protected] and we'll be happy to assist.