@carter-rmn/cpix-js

Overview

@carter-rmn/cpix-js is a JavaScript library for integrating Carter Analytics into your React applications. It provides an easy-to-use SDK for initializing and publishing events to Carter's analytics server.

Installation

To install the package, run the following command:

npm install @carter-rmn/cpix-js

Usage

Below is an example of how to use the @carter-rmn/cpix-js package within a React application.

Example

ReactJS

import { useEffect } from 'react';
import reactLogo from './assets/react.svg';
import { CarterAnalytics } from '@carter-rmn/cpix-js';

const App = () => {
  useEffect(() => {
    CarterAnalytics.initialize([
      {
        client_id: '61e5cc16-f3aa-5e5d-9942-2e0cfefc75d3',
        options: {
          debug: false,
          tracker_server_url:
            'https://<resource_id>.execute-api.<region>.amazonaws.com/<stage>',
        },
      },
    ]);
  }, []);

  const addToCart = () => {
    CarterAnalytics.publish({
      event: 'add_to_cart',
      event_properties: {
        product_id: '123',
        product_name: 'Pixel 6',
        quantity: 1,
        price: 599,
      },
    });
  };

  return (
    <div id="app">
      <a
        href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
        target="_blank"
      >
        <img src={reactLogo} className="logo" alt="React logo" />
      </a>
      <h1>Carter Analytics | React SDK!</h1>
      <div className="card">
        <button type="button" onClick={addToCart}>
          Publish Event
        </button>
      </div>
      <p className="read-the-docs">Click on Publish Event Button</p>
      <p className="read-the-docs">Open Dev Console</p>
    </div>
  );
};

export default App;

Vanilla JavaScript

<script src="./node_modules/@carter-rmn/cpix-js/dist/cpix.iife.js"></script>
<script>
  window.cpix.initialize([
    {
      client_id: 'API_KEY',
      options: {
        debug: true,
        tracker_server_url: 'http://localhost:3001/events',
      },
    },
  ]);
</script>

Initialization

To initialize the Carter Analytics SDK, use the CarterAnalytics.initialize method. You need to pass an array of configuration objects, each containing a client_id and options.

CarterAnalytics.initialize([
  {
    client_id: 'your-client-id',
    options: {
      debug: false,
      tracker_server_url: 'https://your-tracker-server-url',
    },
  },
]);

Publishing Events

To publish an event, use the CarterAnalytics.publish method. You need to specify the event name and the event_properties.

CarterAnalytics.publish({
  event: 'event_name',
  event_properties: {
    key,
    // additional properties
  },
});

API

CarterAnalytics.initialize(configurations)

• configurations: An array of configuration objects.
  • client_id: A string representing the client ID.
  • options: An object containing additional options.
    • debug: A boolean to enable or disable debug mode.
    • tracker_server_url: A string representing the URL of the tracker server.

CarterAnalytics.publish(eventData)

• eventData: An object containing event data.
  • event: A string representing the event name.
  • event_properties: An object containing properties related to the event.