Elevar

https://docs.getelevar.com
Admin
Elevar is a comprehensive analytics and tracking platform that provides server-side tracking, data...
Tokens:292,234
Snippets:5,229
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Products Array Example

Source: https://docs.getelevar.com/docs/headless-implementing-the-data-layer

Example of a products array used for data layer implementation. Includes fields like SKU, name, brand, category, price, quantity, position, list, product_id, variant_id, compare_at_price, image, and URL.

```javascript
/** Products Array **/
const products = [
	{
		id: "LB00161-34689553170476", // SKU
    name: "Lovebox Original Color & Photo", // Product title
    brand: "Lovebox INC",
    category: "Home,Living,Art & Objects,Tabletop",
    variant: "USA wall plug",
    price: "119.99",
    quantity: "1", // Not required for dl_select_item & dl_view_item
		position: item.position, // Only required for dl_select_item; position in the list of search results, collection views and position in cart indexed starting at 1
    list: "/art/wallhangings", // The list the product was discovered from
    product_id: "6979886940352", // The product_id
    variant_id: "41141193965760", // id or variant_id
    compare_at_price: "139.99", // If available on dl_view_item & dl_add_to_cart otherwise use "0.0"
    image: "https://cdn.shopify.com/small.png", // If available, otherwise use an empty string
		url: "https://domain.com/products/womens-shoe?variant=123", // URL for the Product Page. Only required for dl_add_to_cart.
	},
  ...
]
```

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

### Push Start Trial Event

Source: https://docs.getelevar.com/docs/how-to-configure-mid-funnel-standard-events

Push the 'dl_start_trial' event to the Elevar data layer. Include `pltv`, `value`, and `currency_code` in `event_properties`.

```javascript
window.ElevarDataLayer.push({
	event: "dl_start_trial",
	event_properties: {
		pltv: "250",
		value: "50.25",
		currency_code: "USD"
	}
});
```

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

### Example TikTok Ad URL with UTM and CLID Parameters

Source: https://docs.getelevar.com/docs/how-to-configure-tiktok-events-api-via-elevar-server-side-destination

This example shows a URL with both UTM parameters and the TikTok 'ttclid' macro. The '__CLICKID__' macro should be left as is.

```url
https://yourdomain.com?utm_source=tiktok&utm_medium=paidsocial&ttclid=__CLICKID__
```

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

### Shopify Source Script Example (No Comments)

Source: https://docs.getelevar.com/docs/example-shopify-source-script-without-comments

This script fetches configuration, imports a handler, and processes cart and user data for tracking. It's designed to be placed in Shopify checkout settings.

```javascript
<script type="module">
  try {
    const response = await fetch("https://shopify-gtm-suite.getelevar.com/configs/617bd46625d10a8d734ad3effce11112311231212313123/config.json");
    const config = await response.json();
    const scriptUrl = config.script_src_app_theme_embed;

    if (scriptUrl) {
      const { handler } = await import(scriptUrl);

      await handler(
        config,
        
        {
          cartData: {
  attributes: {{- cart.attributes | json -}},
  cartTotal: "{{- cart.total_price | times: 0.01 | json -}}",
  currencyCode: {{- cart.currency.iso_code | json -}},
  items: [
    {%- for line_item in cart.items -%}
      {
        {%- if line_item.sku != blank -%}
          id: {{- line_item.sku | json -}},
        {%- else -%}
          id: "{{- line_item.product_id | json -}}",
        {%- endif -%}
        name: {{- line_item.product.title | json -}},
        brand: {{- line_item.vendor | json -}},
        category: {{- line_item.product.type | json -}},
        variant: {{- line_item.variant.title | json -}},
        price: "{{- line_item.final_price | times: 0.01 | json -}}",
        position: {{- forloop.index -}},
        quantity: "{{- line_item.quantity | json -}}",
        productId: "{{- line_item.product_id | json -}}",
        variantId: "{{- line_item.variant_id -}}",
        compareAtPrice: "{{- line_item.variant.compare_at_price | times: 0.01 | json -}}",
        image: "{{- line_item.image | image_url -}}"
      },
    {%- endfor -%}
  ]
}
,
          user: {
  {%- if checkout -%}
    cartTotal: "{{- checkout.total_price | times: 0.01 | json -}}",
    currencyCode: {{- checkout.currency | json -}},
  {%- else -%}
    cartTotal: "{{- cart.total_price | times: 0.01 | json -}}",
    currencyCode: {{- cart.currency.iso_code | json -}},
  {%- endif -%}
  {%- if customer -%}
    customer: {
      id: "{{- customer.id | json -}}",
      email: {{- customer.email | json -}},
      firstName: {{- customer.first_name | json -}},
      lastName: {{- customer.last_name | json -}},
      phone: {{- customer.phone | json -}},
      city: {{- customer.default_address.city | json -}},
      zip: {{- customer.default_address.zip | json -}},
      address1: {{- customer.default_address.address1 | json -}},
      address2: {{- customer.default_address.address2 | json -}},
      country: {{- customer.default_address.country | json -}},
      countryCode: {{- customer.default_address.country_code | json -}},
      province: {{- customer.default_address.province | json -}},
      provinceCode: {{- customer.default_address.province_code | json -}},
      tags: {{- customer.tags | join: ', ' | json -}}
    }
  {%- endif -%}
},
          isOnCartPage: false,
          collectionView: null,
          searchResultsView: null,
          productView: null,
          checkoutComplete: {%- if checkout and first_time_accessed -%}
  {
    currencyCode: {{- checkout.currency | json -}},
    actionField: {
      {%- if checkout.order_id -%}
        id: {{- checkout.order_id | json -}},
      {%- else -%}
        id: {{- checkout.id | json -}},
      {%- endif -%}
      {%- if checkout.order_name -%}
        order_name: {{- checkout.order_name | json -}},
      {%- endif -%}
      affiliation: {{- shop.name | json -}},
      revenue: "{{- checkout.total_price | times: 0.01 | json -}}",
      tax: "{{- checkout.tax_price | times: 0.01 | json -}}",
      shipping: "{{- checkout.shipping_price | times: 0.01 | json -}}",
      {%- if checkout.discount_applications -%}
        coupon: {{- checkout.discount_applications[0].title | json -}},
      {%- endif -%}
      {%- if order.subtotal_price -%}
        subTotal: "{{- order.subtotal_price | times: 0.01 | json -}}",
      {%- elsif checkout.subtotal_price -%}
        subTotal: "{{- checkout.subtotal_price | times: 0.01 | json -}}",
      {%- endif -%}
      productSubTotal: "{{- checkout.line_items_subtotal_price | times: 0.01 | json -}}",
      discountAmount: "{{- checkout.discounts_amount | times: 0.01 | json -}}"
    },
    {%- if checkout.customer -%}
      customer: {
        id: "{{- checkout.customer.id | json -}}",
        email: {{- checkout.email | json -}},

```

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

### Express Proxy Middleware Setup

Source: https://docs.getelevar.com/docs/proxying-elevars-non-shopify-subdomain-code

Set up Express.js middleware to proxy Elevar requests. This example uses the `express-http-proxy` package to forward requests to Elevar's server URL.

```javascript
// https://expressjs.com/
// https://github.com/villadora/express-http-proxy

app.use(
  "/elevar", // your proxy path
  proxy("https://hits.getelevar.com") // our server URL
);

```

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

### Outbrain Pixel ID Example

Source: https://docs.getelevar.com/docs/how-to-find-outbrain-pixel-id

This is an example of the Outbrain Pixel ID. You can either provide the entire code snippet or just the Pixel ID.

```plaintext
111aaaa11111111aa1aaaa1a1111a111a1
```

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

### Example LiveConnect Base Tag

Source: https://docs.getelevar.com/docs/how-to-find-liveconnect-pixel-id

This is an example of a LiveConnect Base Tag. The LiveConnect Pixel ID is the alphanumeric string within the 'src' attribute.

```html
<script type="text/javascript" src="//b-code.liadm.com/a-00-xx.min.js" async="true" charset="utf-8"></script>
```

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

### Install Google Tag Manager (GTM)

Source: https://docs.getelevar.com/docs/api-installation-process-of-elevar-scripts

Paste this code as high in the `<head>` tags as possible. Replace 'GTM-XXXXXX' with your web container ID.

```html
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
```

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

### Begin Checkout Event

Source: https://docs.getelevar.com/docs/api-implementing-the-checkout-funnel-events-data-layer

Fire the `dl_begin_checkout` event when a user starts the checkout process. Includes user properties, marketing landing site information, and e-commerce checkout details.

```javascript
/** Begin Checkout **/
window.ElevarDataLayer.push({
    event: "dl_begin_checkout",
    user_properties: userProperties,
    marketing: {
        landing_site: "/store/product-a?utm_source=web&utm_campaign=spring" // The first page that the user landed on when they visited your site with query parameters
    },
    ecommerce: {
        currencyCode: "USD",
        checkout: {
            actionField: {
                step: "1"
            },
            products: products,
        }
    }
});
```

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

### Example TikTok Ad URL with UTM Parameters

Source: https://docs.getelevar.com/docs/how-to-configure-tiktok-events-api-via-elevar-server-side-destination

This is an example of a URL with UTM parameters added for TikTok ads. Ensure your URL includes utm_source and utm_medium.

```url
https://yourdomain.com?utm_source=tiktok&utm_medium=paidsocial
```

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

### Example Data Layer Structure and Push

Source: https://docs.getelevar.com/docs/api-implementing-the-data-layer

Illustrates the structure of a typical Google Tag Manager data layer and how to push new events into it.

```javascript
window.dataLayer = [
	{ event: "gtm.dom", ... }, // user loads a page
	{ event: "dl_view_item",  ... }, // user views a product
	{ event: "dl_add_to_cart",  ... }, //	user adds a product
  ...
];

// Pushing a new event into the data layer
window.dataLayer.push({ event: "dl_remove_from_cart", ... });
```
Tokens:
Raw