### UTM Setup Example for Ad Links

Source: https://kb.triplewhale.com/en/articles/9534445-attribution-for-non-integrated-channels

This example demonstrates how to construct a URL with UTM parameters for tracking ad performance. It includes source, campaign, term, and content parameters, showing a practical application of the UTM setup.

```text
https://yoursite.com/product?tw_source=taboola&tw_campaign=summer-sale&utm_term=MA-US-18-24&utm_content=bogo_summer_sale_TOF_22
```

--------------------------------

### Checkout Event Implementation

Source: https://kb.triplewhale.com/en/articles/9858819-sonar-setup-for-woocommerce-shops-beta

This section outlines the implementation of three key checkout events (`checkout_started`, `payment_info_submitted`, `purchase`) using the `TriplePixel` function. It provides detailed examples of the parameters required for each event.

```APIDOC
## Checkout Event Implementation

### Description
Implement the `checkoutStarted`, `paymentInfoSubmitted`, and `purchase` events using the `TriplePixel` function to track the customer's checkout journey. Populate as many fields as possible for accurate data capture.

### Method
JavaScript Function Call

### Endpoint
Checkout Pages

### Parameters
#### `checkoutStarted` Event Parameters
- **eventId** (string) - Optional - ID for cross-platform deduplication.
- **email** (string) - Required (if phone is not provided) - Customer's email address.
- **phone** (string) - Required (if email is not provided) - Customer's phone number.
- **firstName** (string) - Optional - Customer's first name.
- **lastName** (string) - Optional - Customer's last name.
- **orderId** (string) - Optional - System order ID.
- **cotkn** (string) - Optional - Token used for order-journey matching.
- **lineItems** (array) - Required - An array of objects, each representing a line item in the order.
  - **i** (string) - Required - Product ID.
  - **q** (integer) - Required - Quantity of the product.
  - **v** (string) - Required - Variant ID.
- **address** (object) - Required - Customer's address details.
  - **zip** (string) - Required - Postal/ZIP code.
  - **city** (string) - Required - City name.
  - **countryCode** (string) - Required - ISO 3166-1 alpha-2 country code.
  - **provinceCode** (string) - Required - Province/State code.

### Request Example (`checkoutStarted`)
```javascript
TriplePixel('checkoutStarted', {
  eventId: 'evt_sub_001',
  email: 'user@example.com',
  phone: '+1-555-123-4567',
  firstName: 'John',
  lastName: 'Doe',
  orderId: 'order_0000',
  cotkn: '121212121212',
  lineItems: [{
   i: '1234567',
   q: 1,
   v: '654321'
  }],
  address: { zip: '67676', city: 'Sterling', countryCode: 'US', provinceCode: 'KS'}
});
```

### Response
#### Success Response
N/A (This is a client-side event trigger)

#### Response Example
N/A

### Note
The `paymentInfoSubmitted` and `purchase` events follow the same format as `checkoutStarted`, but may have different required fields depending on the specific event and available data.
```

--------------------------------

### Checkout Started Event

Source: https://kb.triplewhale.com/en/articles/9548187-sonar-setup-for-headless-shopify-stores

This event is triggered when a user initiates the checkout process. It captures essential user and order details.

```APIDOC
## POST /event/checkout_started

### Description
Triggers the 'checkout_started' event for headless checkouts. Captures user information, order details, and line items.

### Method
POST

### Endpoint
/event/checkout_started

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **eventId** (string) - Optional - ID for cross-platform deduplication.
- **email** (string) - Required - User's email address.
- **phone** (string) - Required - User's phone number.
- **firstName** (string) - Optional - User's first name.
- **lastName** (string) - Optional - User's last name.
- **orderId** (string) - Optional - System order ID.
- **cotkn** (string) - Optional - Token for order-journey matching.
- **lineItems** (array) - Required - Array of line items in the order.
  - **i** (string) - Required - Product ID.
  - **q** (integer) - Required - Quantity.
  - **v** (string) - Required - Variant ID.
- **address** (object) - Required - User's address information.
  - **zip** (string) - Required - Postal code.
  - **city** (string) - Required - City name.
  - **countryCode** (string) - Required - Country code (e.g., US).
  - **provinceCode** (string) - Required - Province/State code (e.g., KS).

### Request Example
```json
{
  "eventId": "evt_sub_001",
  "email": "user@example.com",
  "phone": "+1-555-123-4567",
  "firstName": "John",
  "lastName": "Doe",
  "orderId": "order_0000",
  "cotkn": "121212121212",
  "lineItems": [
    {
      "i": "1234567",
      "q": 1,
      "v": "654321"
    }
  ],
  "address": {
    "zip": "67676",
    "city": "Sterling",
    "countryCode": "US",
    "provinceCode": "KS"
  }
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the event submission.

#### Response Example
```json
{
  "status": "success"
}
```
```

--------------------------------

### Example Tracking URL Structure

Source: https://kb.triplewhale.com/en/articles/6458728-track-affiliate-influencer-revenue-with-influencers-and-affiliate

This example demonstrates the structure of a unique tracking URL generated for an affluencer, including parameters for link ID and affluencer ID.

```text
yoursite.com/product-a?linkId=yourmanegirlsonia_yourmanegirlsonia_instagram&affluencerId=yourmanegirlsonia
```

--------------------------------

### Example GTM Setup for Product Customization Event

Source: https://kb.triplewhale.com/en/articles/9957947-tracking-custom-events-with-triple-pixel-attribution

This HTML snippet provides an example of setting up a 'productCustomizationInteraction' event within Google Tag Manager. It uses GTM variables like {{Custom Event - Product ID}} to dynamically pass event data. Ensure corresponding variables are created in GTM for each placeholder.

```html
<script>
TriplePixel('custom', 'productCustomizationInteraction', {
  productId: '{{Custom Event - Product ID}}',
  customizationType: '{{Custom Event - Customization Type}}',
  completedCustomization: {{Custom Event - Completed}}
});
</script>
```

--------------------------------

### Example TriplePixel Data Objects

Source: https://kb.triplewhale.com/en/articles/6266255-adding-the-triple-pixel-to-a-headless-store-or-custom-website

Examples of TriplePixel Data Objects, showing configurations with and without product and search context. The 'product' and 'search' fields can be left blank if not applicable.

```javascript
{
  TripleName: 'shop.myshopify.com',
  isHeadless: true,
  plat: 'SHOPIFY',
  product: {
    id: '48269676624115',
    name: 'Top Knot Messy Bun Ponytail Holder',
    price: '42.99',
    variant: '8218652206806'
  },
  search: 'Ponytail Holder',
  ver: '2.16'
}
```

```javascript
{
  TripleName: 'shop.myshopify.com',
  isHeadless: true,
  plat: 'SHOPIFY',
  product: {
     id: '',
     name: '',
     price: '',
     variant: ''
   },
  search: '',
  ver: '2.16'
}
```

--------------------------------

### Base Tracking Snippet Installation

Source: https://kb.triplewhale.com/en/articles/6266255-adding-the-triple-pixel-to-a-headless-store-or-custom-website

Instructions on how to install the base tracking snippet for the Triple Pixel on your headless store or custom website.

```APIDOC
## POST /websites/kb_triplewhale_en

### Description
Install the base tracking snippet in the `<head>` of all site pages to load the Triple Pixel JavaScript asynchronously.

### Method
POST

### Endpoint
/websites/kb_triplewhale_en

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **snippet** (string) - Required - The base tracking snippet code.

### Request Example
```json
{
  "snippet": "<script>...</script>"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message indicating successful installation.

#### Response Example
```json
{
  "message": "Base tracking snippet installed successfully."
}
```

### Testing Your Installation
1. Open any page where you have installed the pixel.
2. Open the developer console in your browser.
3. Enter `TriplePixelData` into your console to validate that the `TriplePixelData` object is present.
    - If you see `undefined`, please go back and ensure:
        1. The code was added within the `<head>` tags of the page.
        2. Any cached HTML content is purged (this varies per platform and content delivery network - please consult with your technical team).
```

--------------------------------

### Trigger Checkout Started Event with Triple Pixel

Source: https://kb.triplewhale.com/en/articles/9548187-sonar-setup-for-headless-shopify-stores

This JavaScript code snippet demonstrates how to trigger the 'checkoutStarted' event using the TriplePixel function. It includes optional and required fields such as event ID, email/phone, names, order ID, cotkn, line items, and address.

```javascript
TriplePixel('checkoutStarted', {
  eventId: 'evt_sub_001',              // ID for cross-platform dedupe (Optional)  
  email: 'user@example.com',           // At least one of email or phone (Required)  
  phone: '+1-555-123-4567',
  firstName: 'John',                   // Optional  
  lastName: 'Doe',                     // Optional  
  orderId: 'order_0000',               // System order ID (Optional)  
  cotkn: '121212121212',               // Used for order<>journey matching (Optional)  
  lineItems: [{
   i: '1234567',                       // Product ID (Required)                   
   q: 1,                               // Quantity (Required)               
   v: '654321'                	       // Variant ID (Required)               
  }],  
  address: { zip: '67676', city: 'Sterling', countryCode: 'US', provinceCode: 'KS'}		// Required  
});
```

--------------------------------

### Example TriplePixel Data Objects with Context

Source: https://kb.triplewhale.com/en/articles/6266255-adding-the-triple-pixel-to-3rd-party-landing-pages-or-a-headless-shopify-store

Illustrates example TriplePixel Data Objects, showing how to include 'product' and 'search' context. The 'product' object contains id, name, price, and variant. The 'search' field contains the user's search term. These fields are optional and should be configured to dynamically populate.

```javascript
{
  TripleName: 'shop.myshopify.com',
  isHeadless: true,
  plat: 'SHOPIFY',
  product: {
    id: '48269676624115',
    name: 'Top Knot Messy Bun Ponytail Holder',
    price: '42.99',
    variant: '8218652206806'
  },
  search: 'Ponytail Holder',
  ver: '2.16'
}
```

--------------------------------

### Trigger Checkout Events with Triple Pixel

Source: https://kb.triplewhale.com/en/articles/9767360-sonar-setup-for-bigcommerce-shops-beta

This JavaScript code provides examples of how to trigger essential checkout events using the Triple Pixel function. It includes `checkoutStarted`, `payment_info_submitted`, and `purchase` events, demonstrating the required and optional parameters for each. These events are crucial for capturing and deduplicating conversion data during the checkout process.

```javascript
TriplePixel('checkoutStarted', {
  eventId: 'evt_sub_001',              // ID for cross-platform dedupe (Optional)
  email: 'user@example.com',           // At least one of email or phone (Required)
  phone: '+1-555-123-4567',
  firstName: 'John',                   // Optional
  lastName: 'Doe',                     // Optional
  orderId: 'order_0000',               // System order ID (Optional)
  cotkn: '121212121212',               // Used for order<>journey matching (Optional)
  lineItems: [{
   i: '1234567',                       // Product ID (Required)
   q: 1,                               // Quantity (Required)
   v: '654321'                	       // Variant ID (Required)
  }],
  address: { zip: '67676', city: 'Sterling', countryCode: 'US', provinceCode: 'KS'}
});
```