Storefront Pixel

Installing the Pixel

Copy and paste the following Liquid Code into your layouts/theme.liquid file before any JavaScript that utilizes the Layers API. Replace {{ PUT YOUR TRACKING API KEY HERE}} with the Tracking API Key found under Settings > API Access.

{% comment %} Start layers click tracking {% endcomment %}
<script id="layers-config" type="application/json">
{
"apiToken": "{{ PUT YOUR TRACKING API KEY HERE}}"
}
</script>
{% comment %} theme-check-disable {% endcomment %}
<script id="layers-session-context" type="application/json">
{
"path": {{ request.path | json }},
"cart_empty": {{ cart.empty? | json }},
"signed_in": {% if customer %} true {% else %} false {% endif %},
"cart_value": {{ cart.total_price | divided_by: 100.0 | json }},
"num_cart_items": {{ cart.item_count | default: 0 | json }},
"num_orders": {{ customer.orders_count | default: 0 | json }},
"average_order_value": {% if customer.orders_count > 0 %}
  {% assign customer_orders_count = customer.orders_count | plus: 0.0 %}
  {{ customer.total_spent | divided_by: customer_orders_count | divided_by: 100.0 | json }}
{% else %}
  0
{% endif %},
{% assign sorted_orders = customer.orders | sort: "created_at" %}
{% assign time_diffs = 0 %}
{% assign prev_date = nil %}
{% assign interval_count = 0 %}
{% assign oldest_order_date = sorted_orders.first.created_at | date: '%s' %}
{% assign discount_without_coupon = 0 %}
{% assign discount_with_coupon = 0 %}
{% assign cart_discount_without_coupon = 0 %}
{% assign cart_discount_with_coupon = 0 %}

{% for order in sorted_orders %}
  {% if prev_date %}
    {% assign current_date = order.created_at | date: '%s' %}
    {% assign diff = current_date | minus: prev_date %}
    {% assign time_diffs = time_diffs | plus: diff %}
    {% assign interval_count = interval_count | plus: 1 %}
  {% endif %}
  {% assign prev_date = order.created_at | date: '%s' %}

  {% for discount in order.discount_applications %}
    {% assign discount_amount = discount.total_allocated_amount %}
    {% if discount.type == 'discount_code' %}
      {% assign discount_with_coupon = discount_with_coupon | plus: discount_amount %}
    {% else %}
      {% assign discount_without_coupon = discount_without_coupon | plus: discount_amount %}
    {% endif %}
  {% endfor %}
{% endfor %}

{% for discount in cart.discount_applications %}
  {% assign discount_amount = discount.total_allocated_amount %}
  {% if discount.type == 'discount_code' %}
    {% assign cart_discount_with_coupon = cart_discount_with_coupon | plus: discount_amount %}
  {% else %}
    {% assign cart_discount_without_coupon = cart_discount_without_coupon | plus: discount_amount %}
  {% endif %}
{% endfor %}

"days_between_orders": {% if interval_count > 0 %}
  {{ time_diffs | divided_by: interval_count | divided_by: 86400 | json }}
{% else %}
  null
{% endif %},
"days_since_last_order": {% if customer.last_order %}
  {% assign last_order_date = customer.last_order.created_at | date: '%s' %}
  {% assign current_date = 'now' | date: '%s' %}
  {{ current_date | minus: last_order_date | divided_by: 86400 | json }}
{% else %}
  null
{% endif %},
"days_since_oldest_order": {% if sorted_orders.size > 0 %}
  {% assign current_date = 'now' | date: '%s' %}
  {{ current_date | minus: oldest_order_date | divided_by: 86400 | json }}
{% else %}
  null
{% endif %},
"total_spent": {{ customer.total_spent | divided_by: 100.0 | json }},
"discount_value_without_coupon": {{ discount_without_coupon | divided_by: 100.0 | json }},
"discount_value_with_coupon": {{ discount_with_coupon | divided_by: 100.0 | json }},
"cart_discount_value_without_coupon": {{ cart_discount_without_coupon | divided_by: 100.0 | json }},
"cart_discount_value_with_coupon": {{ cart_discount_with_coupon | divided_by: 100.0 | json }},
"items_purchased": [
  {% assign first_item = true %}
  {% for order in sorted_orders %}
    {% for line_item in order.line_items %}
      {% if line_item.product_id and line_item.variant_id %}
        {% if first_item %}
          {% assign first_item = false %}
        {% else %}
          ,
        {% endif %}
        {
          "transaction_id": {{ order.id | json }},
          "variant_id": {{ line_item.variant_id | json }},
          "product_id": {{ line_item.product_id | json }},
          "sku": {{ line_item.sku | json }},
          "product_type": {{ line_item.product.type | json }},
          "option1": {{ line_item.variant.option1 | json }},
          "option2": {{ line_item.variant.option2 | json }},
          "option3": {{ line_item.variant.option3 | json }},
          "time": {{ order.created_at | date: "%Y-%m-%dT%H:%M:%S%z" | json }}
        }
      {% endif %}
    {% endfor %}
  {% endfor %}
],
"cart_items": [
  {% assign first_cart_item = true %}
  {% for item in cart.items %}
    {% if item.product_id and item.variant_id %}
      {% if first_cart_item %}
        {% assign first_cart_item = false %}
      {% else %}
        ,
      {% endif %}
      {
        "variant_id": {{ item.variant_id | json }},
        "product_id": {{ item.product_id | json }},
        "product_type": {{ line_item.product.type | json }},
        "quantity": {{ item.quantity | json }},
        "option1": {{ item.variant.option1 | json }},
        "option2": {{ item.variant.option2 | json }},
        "option3": {{ item.variant.option3 | json }}
      }
    {% endif %}
  {% endfor %}
]
}
</script>
<link rel="dns-prefetch" href="https://cl.uselayers.com">
{% comment %} theme-check-enable {% endcomment %}
<script src="https://cdn.uselayers.com/onsite.js" async></script>
{% comment %} End layers click tracking {% endcomment %}

Please contact support if you have any questions or could use some assistance installing the Storefront Pixel.

Events Captured by Pixel

Collection View
Product Click
Product View
Product Add to Cart

Line Item Properties

A Line Item Property with the key _layers_attribution is appended to some add to cart forms. The value corresponds to the identifier of the request made using the Search or Browse API where the customer last saw the product before adding it to their cart. This property is only added if the customer clicked on products from the Search or Browse APIs.

Misc

Browser Specs Supported

Back/Forward Cache.
Speculation Rules.
SPA Navigation.

Platform

Engine

Shopify Integration

Legal

Storefront Pixel

Installing the Pixel

Events Captured by Pixel

Line Item Properties

Misc

Browser Specs Supported

Platform

Engine

Shopify Integration

Legal

​Installing the Pixel

​Events Captured by Pixel

​Line Item Properties

​Misc

​Browser Specs Supported

Installing the Pixel

Events Captured by Pixel

Line Item Properties

Misc

Browser Specs Supported