# Integrations

# Analytics integration

Google and Facebook Pixel Analytics is already integrated into the Shoperb. To start tracking events you need to add special html attributes into shoperb theme code on buttons.

# Set up tracking events

Shoperb supports tracking of 3 optional basic events - 'add to cart', 'remove from cart' and search. In order to capture them, you will need to add some attributes for the buttons or elements. Purchase and checkout events are tracked automatically.

Add To Cart button the attribute analytics-tracking="add_to_cart".

Search - add analytics-tracking="search" to the search element; this can be either the form itself or a button. As well as, add data-analytics-search-term attribute to the input search.

Remove from cart

To track the removal of items, these attributes need to be configured:

inside the cart form element, add analytics-tracking="remove_from_cart" attribute.
for each product main element, add the following attributes: data-analtyics-cart-item, data-analytics-product-name="name of the product" and lastly, data-analytics-cart-item-id="cart_item_id". See cart item drop for the id.
for the remove button, you need to add the following attributes: data-analytics-remove-item and data-analytics-remove-item-id="cart_item_id"
if product has a variant element showing, you will also need to add to it's element attributes data-analytics-cart-variant-id="cart_item_id" and data-analytics-cart-variant-name="name of variant"
for the quantity input element, you need to add attribute data-analytics-cart-item-quantity-id="cart_item_id"
finally, you need to add this to the price element data-analytics-cart-item-total="total_value", where total_value is the total price of the product given the quantity.

# Example

<div class="add-to-cart">
   <button class="button primary" analytics-tracking="add_to_cart" type="submit" >{{'product.add_to_cart' | t}}</button>
</div>

# Example for remove item

Main cart form:

<form action="{{form_actions.cart_update}}.json?include[]=liquid" 
  method="post" class="custom" analytics-tracking="remove_from_cart">
</form>

Example individual element

<tr class="cart-item">
  <td class="image-name">
    <div class="image">
      <a href="{{item.product.url}}" style="background-image: url({{item.product.image.size-100.url}})"></a>
    </div>
    <div class="product" data-analytics-cart-item data-analytics-cart-item-id="{{ item.id }}" data-analytics-product-name="{{ item.product.name }}">
      <a href="{{item.product.url}}" class="product-link">{{item.product.name}}</a>
      {% if item.variant.attributes.any? %}
      {% assign variant_name = '' %}
      {% for attribute in item.variant.attributes %}
        {% assign variant_name = variant_name | append: attribute.value %}
        {% unless forloop.last %}{% assign variant_name = variant_name | append: ', ' %}{% endunless %}
      {% endfor %}
      <a href="{{item.product.url}}" class="product-variant" data-analytics-cart-variant-id="{{ item.id }}" data-analytics-cart-variant-name="{{ variant_name }}">
        {{ variant_name }}
      </a>
      {% endif %}
      <div class="remove" data-remove-item data-analytics-remove-item data-analytics-remove-item-id="{{ item.id }}">{{'cart.remove' | t}}</div>
    </div>
  </td>
  <td class="quantity">
    <div class="field cart-custom">
      <span data-decrease-quantity></span>
      <input type="text" class="field styled-input" name="update[{{item.id}}]" value="{{item.quantity}}" placeholder="{{'cart.quantity_placeholder' | t}}" type="number" data-analytics-cart-item-quantity-id="{{ item.id }}">
      <span data-increase-quantity></span>
    </div>
  </td>
  <td class="price" data-analytics-cart-item-total-id="{{ item.id }}" data-analytics-cart-item-total="{{ item.total }}">
    <span class="money">{{item.total | money_with_cents}}</span>
  </td>
</tr>

# EmailIntegration

Currently Shoperb supports two autoresponders: Campaign Monitor and Smaily To use it inside a section, the json file of the section needs to have a setting called emailmarketing like so:

{
 "type": "emailmarketing",
 "handle":"email_marketing" 
}

To get the link to add a subscriber, we will use the following link

 <a href="{{ paths.add_subscriber }}?email_marketing={{ section.settings.email_marketing}}"

Inside theme builder, this will make a setting called "Email Marketing". Options will be based on user enabled integrations.

To create a subscription form (without inputs, just form), we will use the following

{% form 'subscribers' %}
  ...your inputs
{% endform %}

← Sections Examples →