@nacelle/nacelle-refersion-nuxt-module NPM

DEPRECATED

This package is deprecated. To integrate a third party script with your Nuxt project, follow our docs here: https://docs.getnacelle.com/nuxt/external-scripts.html

# Nacelle Refersion Nuxt Module

This Nuxt module allows you to integrate Refersion affiliate tracking with your Nacelle Nuxt project.

Setup

Install Module

In your Nacelle Nuxt project run

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

Update `nuxt.config.js`

Add this module to the list of Nuxt modules in your nuxt.config.js file.

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

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 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.