You are viewing the v1 Nacelle Docs for existing merchants.New merchants can find the V2 docs here: nacelle.com/docs.

# Refersion Setup

To fully integrate Refersion and Nacelle, please follow the steps below. Make sure Refersion app is installed and setup (opens new window).

# Add Module to Nacelle

Once you have Nacelle and Refersion set up you can install this module in your project from npm:

npm install @nacelle/nacelle-refersion-nuxt-module

After the package has installed, open nuxt.config.js. Under modules add @nacelle/nacelle-refersion-nuxt-module to the array:

modules: [
  // ...other modules,
  '@nacelle/nacelle-refersion-nuxt-module'
],

# Configure Refersion

Update the Nacelle config object to add Refersion options. You will need your Refersion subdomain and API key.

The subdomain can be found in your Refersion dashboard and clicking "Affiliate Sign-up" in the navigation. The popup modal will show the affiliate sign-up url. That's where you will find your Refersion subdomain (ex: http://<Refersion_Subdomain>.refersion.com).

Your API Key can be found in Refersion Account settings under "Refersion API". If you already generated a key, copy the "Public Key" string, otherwise click the button for "Generate New Key" to get the public key.

Add your Refersion API key to your environment variables .env file.

# .env

REFERSION_API_KEY="xxxxxxxxxxxxx"

In the nacelle block of nuxt.config.js, add a new refersion object containing the subdomain and apiKey:

nacelle: {
  // other config,
  refersion: {
    subdomain: '<Refersion_Subdomain>',
    apiKey: process.env.REFERSION_API_KEY
  },
}

# Update Your Cart Template

The Nacelle Refersion integration requires a custom checkout button in order to correctly pass refersion variables from your Nacelle Nuxt project to your checkout.

In your Nacelle Nuxt project find components/nacelle/Cart.vue. In the template code replace <cart-flyout-checkout-button /> with <refersion-cart-checkout-button />.

# Edit checkout.liquid in Shopify

In order for the Refersion tracking to work you must have Shopify Plus and you need editing of checkout.liquid enabled. If you have plus and you don't see checkout.liquid listed in your theme's layouts folder, contact Shopify support and they will enable it for you.

In Shopify got to your theme's code editor and open checkout.liquid. At the bottom of the file before the </body> tag add the following script:

<script>
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1)
    var vars = query.split('&')
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split('=')
      if (pair[0] == variable) {
        return pair[1]
      }
    }
    return false
  }

  function setRefersionVar(key) {
    var value = getQueryVariable(key)

    if (value) {
      localStorage.setItem(key, value)
    }
  }

  var refersionKeys = [
    'rfsn_v4_dbg_mode_on',
    'rfsn_v4_fp_off',
    'rfsn_v4_sentTokensArr',
    'rfsn_v4_current_cart',
    'rfsn_v4_id',
    'rfsn_aid',
    'rfsn_cs',
    'rfsn_ci',
    'rfsn_src',
    'rfsn_v4_aid',
    'rfsn_v4_cs',
    'rfsn_v4_ci',
    'rfsn_v4_src',
  ]

  for (var i = 0; i < refersionKeys.length; i++) {
    setRefersionVar(refersionKeys[i])
  }
</script>

This script adds Refersion tracking variables passed from your Nacelle Nuxt project to the browser's local storage where Refersion can read them.

# Add "Additional scripts" in checkout settings

First go to https://www.refersion.com/tracking (opens new window) and under "Step 1 - Tracking Vists", copy the script source url from the code snippet. It will look something like "//your-refersion-subdomain.refersion.com/tracker/v3/pub_abc123xyz.js". Then your Shopify dashboard go to Settings > Checkout > Order processing and find the field for "Additional scripts". Add the following liquid/javascript scripts, replacing the script source at the top with one you copied from Refersion.

{% if first_time_accessed %}
<!-- REFERSION TRACKING: BEGIN -->
<script src="YOUR_REFERSION_TRACKING_SCRIPT_URL"></script>
<script>
  if (typeof _refersion !== 'undefined') {
    _refersion(function(){
    _rfsn._addCart(Shopify.Checkout.token);
    _rfsn._addTrans({
      'order_id': '{{ checkout.order_number }}',
      'shipping': '{{ checkout.shipping_price | money_without_currency }}',
      'tax': '{{ checkout.tax_price }}',
      {% for discount_application in checkout.discount_applications %}
      'discount_code': '{{ discount_application.title }}',
      'discount': '{{ checkout.discounts_amount | money_without_currency }}',
      {% endfor %}
      'currency_code': 'USD'
    });

    _rfsn._addCustomer({
      'first_name': '{{ checkout.customer.first_name }}',
      'last_name': '{{ checkout.customer.last_name }}',
      'email': '{{ checkout.customer.email }}',
    });

    {% for line_item in line_items %}
    _rfsn._addItem({
      'sku': '{{ line_item.sku }}',
      'quantity': '{{ line_item.quantity }}',
      'price': '{{ line_item.line_price | money_without_currency }}'
    });
    {% endfor %}

    _rfsn._sendConversion();

  });
}
</script>
<!-- REFERSION TRACKING: END -->
{% endif %}

This script will run when a customer has completed a checkout and it will send the customer and cart information to Refersion.

# All Set!

Your Refersion integration is now complete. The Refersion tracking scripts will load on your Nacelle Nuxt project and correctly pass tracking variables to checkout.

# Additional setup if using Recharge

If you are supporting subscriptions with Recharge, you should install their integration by following these instructions (opens new window).

This will handle tracking for checkout, thank you page, and recurring subscriptions.