> ## Documentation Index
> Fetch the complete documentation index at: https://docs.partnero.com/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript tracking

> Integrate Partnero tracking using JavaScript

This guide walks you through integrating Partnero tracking into your website using client-side JavaScript. Ideal for simple setups where you want to track sign-ups and sales directly from the browser.

<Note>
  Before proceeding, you should have a program created on Partnero. If you haven't created one yet, refer to the [Knowledge Base](https://help.partnero.com) for guidance.
</Note>

## Step 1: Install PartneroJS

Install the PartneroJS snippet to track referral visits and attribute sign-ups to the correct partners.

<Steps>
  <Step title="Get your snippet">
    1. Log in to [Partnero](https://app.partnero.com)
    2. Go to **Programs** and select your program
    3. Navigate to **Integration** in the sidebar
    4. Copy the PartneroJS snippet
  </Step>

  <Step title="Install the snippet">
    Paste the snippet into your website's HTML just before the closing `</head>` tag:

    ```html theme={null}
    <!-- PartneroJS -->
    <script>
        (function(p,t,n,e,r,o){ p['__partnerObject']=r;function f(){
        var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
        f.q=f.q||[];p[r]=p[r]||f.bind(f.q);p[r].q=p[r].q||f.q;o=t.createElement(n);
        var _=t.getElementsByTagName(n)[0];o.async=1;o.src=e+'?v'+(~~(new Date().getTime()/1e6));
        _.parentNode.insertBefore(o,_);})(window, document, 'script', 'https://app.partnero.com/js/universal.js', 'po');
        po('settings', 'assets_host', 'https://assets.partnero.com');
        po('program', 'PUBLIC_PROGRAM_ID', 'load');
    </script>
    <!-- End PartneroJS -->
    ```
  </Step>
</Steps>

When a visitor arrives via a referral URL (e.g., `yoursite.com?via=PARTNER_KEY`), the script creates a first-party cookie to store the referral:

* `partnero_partner` for affiliate programs
* `partnero_referral` for refer-a-friend programs

When the visitor signs up or makes a purchase, the cookie is used to attribute them to the correct partner.

## Step 2: Sign-up Tracking

Notify Partnero when a new customer signs up to attribute them to the referring partner.

### Universal Form Tracking (No-Code)

The simplest option - automatically captures sign-ups from standard HTML forms:

```html theme={null}
<script>
    po('integration', 'universal', null);
</script>
```

Add this at the bottom of pages with signup forms. It detects form submissions and creates customers using the submitted name and email.

### JavaScript Sign-up Tracking

For more control, use the JavaScript method directly after a successful sign-up:

<Note>
  You don't need to pass the partner key manually. PartneroJS automatically reads it from the `partnero_partner` cookie when present on the page.
</Note>

<Tabs>
  <Tab title="Basic">
    ```javascript theme={null}
    po('customers', 'signup', {
        data: {
            key: 'customer_123456',  // Unique customer ID or email
            name: 'John',
            email: 'john.doe@partnero.com'
        }
    });
    ```
  </Tab>

  <Tab title="With Partner Key">
    ```javascript theme={null}
    po('customers', 'signup', {
        data: {
            key: 'customer_123456',
            name: 'John',
            email: 'john.doe@partnero.com',
            partner: {
                key: 'PARTNER_REFERRAL_KEY'  // Optional: explicitly set partner
            }
        }
    });
    ```
  </Tab>
</Tabs>

### Parameters

| Parameter     | Type   | Required | Description                                                                           |
| ------------- | ------ | -------- | ------------------------------------------------------------------------------------- |
| `key`         | string | Yes      | Unique customer identifier (account ID or email recommended)                          |
| `name`        | string | No       | Customer's first name (max 100 characters)                                            |
| `surname`     | string | No       | Customer's last name (max 100 characters)                                             |
| `email`       | string | No       | Customer's email address (max 255 characters)                                         |
| `tags`        | array  | No       | Array of tag names to assign to the customer                                          |
| `partner.key` | string | No       | Partner's referral key (auto-detected from `partnero_partner` cookie if not provided) |

### Complete Example

```html theme={null}
<html>
<head>
    <title>Sign Up</title>
    <!-- PartneroJS -->
    <script>
        (function(p,t,n,e,r,o){ p['__partnerObject']=r;function f(){
            var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
            f.q=f.q||[];p[r]=p[r]||f.bind(f.q);p[r].q=p[r].q||f.q;o=t.createElement(n);
            var _=t.getElementsByTagName(n)[0];o.async=1;o.src=e+'?v'+(~~(new Date().getTime()/1e6));
            _.parentNode.insertBefore(o,_);})(window, document, 'script', 'https://app.partnero.com/js/universal.js', 'po');
        po('settings', 'assets_host', 'https://assets.partnero.com');
        po('program', 'YOUR_PROGRAM_ID', 'load');
    </script>
</head>
<body>

<form id="signup-form">
    <input type="text" name="name" placeholder="Your name" />
    <input type="email" name="email" placeholder="Your email" required />
    <input type="password" name="password" placeholder="Password" required />
    <button type="submit">Sign Up</button>
</form>

<script>
    document.getElementById('signup-form').addEventListener('submit', function(event) {
        event.preventDefault();
        
        const name = this.querySelector('input[name="name"]').value;
        const email = this.querySelector('input[name="email"]').value;
        
        if (email) {
            po('customers', 'signup', {
                data: {
                    key: email,
                    name: name,
                    email: email
                }
            });
        }
        
        // Continue with your form submission logic
    });
</script>

</body>
</html>
```

## Step 3: Sales Tracking

Track purchases to reward partners according to your program's commission structure.

<Tip>
  **Prefer automatic tracking?** Connect your payment processor for automatic transaction tracking without writing code:

  * **Stripe** - Payments, subscriptions, and refunds
  * **Paddle** - Checkout and subscription events
  * **Chargebee** - Subscription billing

  Set up integrations in **Program Settings → Integrations**.
</Tip>

<Warning>
  JavaScript transaction tracking is disabled by default for security reasons. Enable it on your program's Integration page, or use the [API](/api-reference/transactions/create) or payment gateway integrations instead.
</Warning>

<Note>
  PartneroJS automatically attributes transactions to the correct partner using the `partnero_partner` cookie—no need to pass the partner key manually.
</Note>

Execute this script immediately after a successful sale:

<Tabs>
  <Tab title="Basic">
    ```javascript theme={null}
    po('transactions', 'create', {
        data: {
            key: 'transaction_123',
            amount: 99.99,
            amount_units: 'usd',
            customer: {
                key: 'customer_123456'
            }
        }
    });
    ```
  </Tab>

  <Tab title="With Product Info">
    ```javascript theme={null}
    po('transactions', 'create', {
        data: {
            key: 'transaction_123',
            amount: 99.99,
            amount_units: 'usd',
            product_id: 'prod_123',
            product_type: 'monthly',
            customer: {
                key: 'customer_123456'
            }
        }
    });
    ```
  </Tab>

  <Tab title="Create Customer + Transaction">
    ```javascript theme={null}
    po('transactions', 'create', {
        data: {
            key: 'transaction_123',
            amount: 99.99,
            amount_units: 'usd',
            customer: {
                key: 'customer_123456'
            }
        },
        options: {
            create_customer: true
        }
    });
    ```
  </Tab>
</Tabs>

### Parameters

| Parameter                 | Type    | Required | Description                                             |
| ------------------------- | ------- | -------- | ------------------------------------------------------- |
| `key`                     | string  | No       | Unique transaction ID (recommended for refund handling) |
| `amount`                  | number  | Yes      | Transaction amount                                      |
| `amount_units`            | string  | No       | Currency code (e.g., `usd`, `eur`, `gbp`)               |
| `product_id`              | string  | No       | Product ID for advanced commission rules                |
| `product_type`            | string  | No       | Product type/category for commission rules              |
| `customer.key`            | string  | Yes      | Customer identifier (from sign-up)                      |
| `options.create_customer` | boolean | No       | Create customer if not exists and attach transaction    |

## Next Steps

<CardGroup cols={2}>
  <Card title="API Integration" icon="code" href="/api-reference/introduction">
    For server-side tracking with full security
  </Card>

  <Card title="Stripe Integration" icon="stripe" href="/integrations/stripe">
    Automatic transaction tracking with Stripe
  </Card>
</CardGroup>