Taplytics Nuxt.js Module

This module integrates Taplytics with your Nuxt.js server rendered application. It injects its API into your app, and applies changes universally (ie, when server rendered and when client rendered).

Installation

yarn add @taplytics/nuxtjs

This module also depends on cookie-universal-nuxt

yarn add cookie-universal-nuxt

Setup

In your nuxt.config.js, add the following to your modules block:

export default {
  ...,
  modules: [
    ...,
    "@taplytics/nuxtjs",
      {
        token: "YOUR TOKEN",
        ssr: true | false (default to true)
      }
    ],
    ["cookie-universal-nuxt"]
  ]
}

Options

| Name | Description | Type | Default | | ---- | -------------------------------- | ------- | ------- | | ssr | Enables/disables ssr integration | Boolean | true |

Usage

| Function | Description | | ----------------------------------------- | ------------------------ | | identify | Identify User | | track | Track event | | page | Track page views | | runningExperiments | Get running experiments | | featureFlagEnabled | Get feature flag enabled | | variable | Get dynamic variable | | codeBlock | Run code block |

identify

Identifies the user that's currently on the page. This helps link their activity on the web with their activity on other platforms (iOS, Android).

Method Signature

this.$Taplytics.identify(user_attributes);

Arguments

• user_attributes (Object): User Attributes object, containing the following fields:
• user_id (string/integer): User's ID (optional).
• email (string): User's Email (optional).
• gender (string): User's Gender, one of male or female (optional).
• age (integer): User's age as a number (optional).
• firstName (integer): User's first name (optional).
• lastName (integer): User's last name (optional).
• ... (string/integer/object): Any extra custom attributes (optional).

Returns

(Promise): Returns a promise containing the result of the call to the worker.

Example

// With just a few named user attributes
this.$Taplytics.identify({
  email: "[email protected]",
  age: 23,
  gender: "male",
  firstName: "Nima",
  lastName: "Gardideh",
});
// Return: Promise {<pending>}

// With non-named custom attributes
this.$Taplytics.identify({
  user_id: 1015,
  loyalty_group: "very_loyal",
  purchases_count: 15,
  friends_count: 800,
});
// Return: Promise {<pending>}

track

Tracks the occurrence of an event for the current visitor (anonymous or identified).

Note that value is identified as revenue. If you want to send information about the event itself, send it through event_attributes.

Method Signature

this.$Taplytics.track(eventName, value, attributes);

Arguments

• eventName (string): Event name.
• value (integer/double): Value of the event.
• attributes (Object): Event attributes to be sent with the event.

Returns

(Promise): Returns a promise containing the result of the call to the worker.

Example

// Simple event
this.$Taplytics.track("Clicked Button");
// Return: Promise {<pending>}

// Event with value (revenue)
this.$Taplytics.track("Purchased", 180.5);
// Return: Promise {<pending>}

// Event with value (revenue) and extra attributes
this.$Taplytics.track("Purchased", 180.5, {
  product_id: 100,
  product_name: "Shirt",
});
// Return: Promise {<pending>}

// Event with just attributes and no value
this.$Taplytics.track("Finished Tutorial", null, {
  time_on_tutorial: 100,
});
// Return: Promise {<pending>}

page

Tracks a new page and time spent on previous page if this is not the first page tracked.

Method Signature

this.$Taplytics.page(category, name, page_attributes);

Arguments

• category (string): The category of the page.
• name (string): The name of the page.
• page_attributes (Object): Custom defined attributes for the page.

Returns

(Promise): Returns a promise containing the result of the call to the worker.

Example

// Track a page view with no attributes
this.$Taplytics.page();
// Return: Promise {<pending>}

// Track it by setting a name
this.$Taplytics.page(null, "Page Name");
// Return: Promise {<pending>}

// Track a page view with a category and a name
this.$Taplytics.page("Product Listings", "Shirts");
// Return: Promise {<pending>}

// Track a page view with a name and attributes
this.$Taplytics.page(null, "Shirts Page", {
  products_count: 150,
});
// Return: Promise {<pending>}

// Track a page view with a name, a category, and attributes
this.$Taplytics.page("Product Listings", "Shirts", {
  products_count: 150,
});
// Return: Promise {<pending>}

runningExperiments

Returns the running experiments and corresponding variation that the current user is bucketed in.

Method Signature

this.$Taplytics.runningExperiments();

Arguments

None.

Returns

(Object): A map of experiment names to the variation name that the current user is bucketed in.

Example

this.$Taplytics.runningExperiments();
// Return: { "Experiment 1": "baseline", "Experiment 2": "Variation 1" }

featureFlagEnabled

Returns whether a feature flag is enabled for the current user.

Method Signature

this.$Taplytics.featureFlagEnabled(name, [(defaultValue = false)]);

Arguments

• name (string): The name of the feature flag.
• defaultValue (boolean): The default value of the feature flag if it does not exist. Defaults to false.

Returns

(boolean): Whether the feature flag corresponding to name is enabled for the current user. Enabled means that the feature flag exists, is turned on in the Taplytics dashboard, and the current user satisfies the conditions of the feature flag.

Example

this.$Taplytics.featureFlagEnabled("enabledFeatureFlag");
// Return: True

this.$Taplytics.featureFlagEnabled("disabledFeatureFlag");
// Return: False

variable

Returns a Taplytics Dynamic Variable value that is controlled by your running experiments and configured through the Taplytics dashboard.

Method Signature

this.$Taplytics.variable(name, defaultValue);

Arguments

• name (string): The name of the variable to retrieve.
• defaultValue (string/number/boolean): Default return value if the variable does not exist.

Returns

(string/number/boolean): The value of the dynamic variable by name if it exists, otherwise returns defaultValue.

Example

this.$Taplytics.variable("existingVarName", "default");
// Return: "existingVarValue"

this.$Taplytics.variable("nonExistingVarName", "default");
// Return: "default"

codeBlock

Creates a Taplytics Code Block that will be run if enabled for the running experiment/variation through the Taplytics dashboard.

Method Signature

this.$Taplytics.codeBlock(name, codeBlock);

Arguments

• name (string): The name of the code block.
• codeBlock (function): The code block to be called if enabled for the experiment's variation.

Returns

None.

Example

this.$Taplytics.codeBlock("enabledCodeBlock", function () {
  console.log("This code block is enabled for my experiment and variation!");
  // run extra code here
});
// Logs: "This code block is enabled for my experiment and variation!"
// Return: undefined

this.$Taplytics.codeBlock("nonEnabledCodeBlock", function () {
  console.log("This code block is either not enabled or does not exist!");
  // run extra code here
});
// Return: undefined

Web modifications

Web modifications are applied automatically via the server and the client.