npm package: @nacelle/nacelle-refersion-nuxt-module
Description: Integrates Refersion into your Nacelle Nuxt project
Latest version: 0.0.10
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

# [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](https://nuxtjs.org/guide/modules/) allows you to integrate [Refersion](https://www.refersion.com/) affiliate tracking with your [Nacelle](https://getnacelle.com/) Nuxt project.

## Setup

### Install Module

In your Nacelle Nuxt project run

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

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

```sh
# .env

REFERSION_API_KEY="xxxxxxxxxxxxx"
```

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

```js
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:

```html
<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](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.

```liquid
{% 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](https://support.refersion.com/en/articles/1064034-recharge-integration).

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