# Client SDK

## Installation

First include the sdk in your website

```
<script src="https://deujvzkogpkk9.cloudfront.net/sdk.js"></script>
```

Then initialize the sdk by providing the pixel key

```
<script>
    ciq("init", "{your-pixel-key-goes-here}")
</script>
```

### Send tracking events

<table><thead><tr><th width="190.54727793696273">Event Name</th><th width="199">Event Description</th></tr></thead><tbody><tr><td><strong>PageView</strong></td><td>This is the default pixel tracking page visits.<br><code>a person lands on your website pages.</code></td></tr><tr><td><strong>ViewContent</strong></td><td>A visit to a web page you care about (product details page).<br><code>a person lands on a product details page.</code></td></tr><tr><td><strong>AddToCart</strong></td><td>When a product is added to the shopping cart.<br><code>a person clicks on an add to cart button.</code></td></tr><tr><td><strong>InitiateCheckout</strong></td><td>When a person enters the checkout flow prior to completing the checkout flow.</td></tr><tr><td><strong>Purchase</strong></td><td>When a purchase is made or checkout flow is completed.<br><code>A person has finished the purchase or checkout flow and lands on thank you or confirmation page.</code></td></tr></tbody></table>

### Usage

```
// the basic syntax
ciq("track", "EventName", data={});
```

```
<script>
    // PageView
    ciq("track", "PageView");

    // ViewContent
    ciq("track", "ViewContent", {
        content: [
            {
                id: 1234, // required
                quantity: 3, // required
                name: "Product name", // optional
                category: "Product Category", // optional
            }
        ],
        currency: "USD", // required
        value: 150.50 // required, sum of products price
    });

    // AddToCart
    ciq("track", "AddToCart", {
        content: [
            {
                id: 1234, // required
                quantity: 3, // required
                name: "Product name", // optional
                category: "Product Category", // optional
            },
            {
                id: 456,
                quantity: 1,
            }
        ],
        currency: "USD", // required
        value: 150.50 // required
    });

    // InitiateCheckout
    ciq("track", "InitiateCheckout", {
        content: [
            {
                id: 1234, // required
                quantity: 3, // required
                name: "Product name", // optional
                category: "Product Category", // optional
            },
            {
                id: 456,
                quantity: 1,
            }
        ],
        currency: "USD", // required
        value: 150.50 // required
    });

    // Purchase
    ciq("track", "Purchase", {
        content: [
            {
                id: 1234, // required
                quantity: 3, // required
                name: "Product name", // optional
                category: "Product Category", // optional
            },
            {
                id: 456,
                quantity: 1,
            }
        ],
        order_id: 1234343545, // required
        currency: "USD", // required
        value: 150.50 // required
    });
</script>
```

## Identity

identify the customer if he **authenticated** by the **id** or **email** or **phone** to re target him in ads.\
the recommended way is to add all data ex: after login.

```
ciq('identity', {your_store_customer_id}, {
    phone: "" ,
    email: "",
});
```

## Popup Identity

is a modal box that ask the user about his email and phone to re target him in **email** or **sms** campaigns, if he **not authenticated** user or anonymous, if the customer fill this data the popup no more appear to him.

the popup already predefined with the desired language.

<figure><img src="https://1119750375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M7X1MfKrY7KCRp85qrV%2Fuploads%2FNjMeccEDE46ojOHREbQB%2Fimage.png?alt=media&#x26;token=6cebb7bf-9fa9-4f0f-8c9a-795fb9d59523" alt=""><figcaption></figcaption></figure>

you can also customize any of those inputs with any colors or text you want from Convertedin dashboard.\ <br>

### Facebook Pixel Integration

You can now integrate your Facebook pixel with valid attributions and properties by using convertedin pixel.\
\
Go To pixel page<br>

* Mark it as active
* Add your Facebook pixel code&#x20;

after saving your website can grab events and send it back to feed your facebook pixel with proper data.

<figure><img src="https://1119750375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M7X1MfKrY7KCRp85qrV%2Fuploads%2FAY4hkLVYoDjCLgCwqQs3%2Fimage.png?alt=media&#x26;token=f278c4b8-c734-4ce7-9cab-5199fc8cd4bf" alt=""><figcaption></figcaption></figure>

<br>