← Starting Page

← How to enable tracking and consent

<aside> 💡 Written by Marina Koch, last updated on 21st of October 2024

</aside>

<aside> 🎓

What you will learn in this article:

In certain cases, such as when using hydrogen themes with highly customized templates, the integration of Admetrics with your shop's templates must be performed manually. This documentation provides step-by-step instructions on how to achieve this integration seamlessly.

1. Tracking code integration (all pages)

To enable tracking for various pages, including the cart and checkout pages, please follow these instructions carefully. Depending on your project's structure, you may need to add the provided code snippet to one or multiple files within your theme.

  1. Single File Integration:

If your project structure allows for a single file inclusion, add the following code snippet to a relevant file, such as components/Layout.jsx or components/Header.jsx.

  1. Multiple File Integration:

If your project necessitates multiple file integrations, consider adding the code snippet to all root routes, such as routes/products.$handle.jsx or routes/collections.$handle.jsx.

Please choose the integration method that aligns best with your theme's structure and data access requirements.

Data Object Configuration

The Admetrics conversion script requires a data object to be present on each tracked page. This data object contains essential information about the current page, user, cart, and order. Some fields are mandatory, such as the shop ID for all events and the order ID for checkout pages. Additionally, optional fields are available, including collection products and cart total price.

It is crucial to pass all values as URL encoded strings. The data object provided below contains Shopify Liquid template variables. Replace these variables with actual values retrieved via GraphQL when using Hydrogen.

var admData = {
  // Required properties for all pages
  "et":  "shopify",        // Event type
  "sid": "{{ shop.id }}",  // Shop ID

  // Additional required properties for checkout
  "oid": "{{ checkout.order_id }}",  // Order ID

  // Optional properties
  "on":  "{{ checkout.order_name }}",  // Order name
  "cid": "{{ customer.id }}",          // Customer ID

  "spi": "{{ product.id }}",       // Product ID
  "sci": "{{ collection.id }}",    // Collection ID
  "cim": "{{ cart.item_count }}",  // Number of items in the cart
  "sctp": "{{ cart.total_price | money_without_currency }}",  // Cart total price

  "sptt": "{{ page_title }}",      // Page title
  "sss": "{{ search.terms }}",     // Search string
  "sppt": "{{ product.title }}",   // Product title
  "spt": "{{ product.type }}",     // Product type 

  "spos": "{{ product.options.size }}",  // Product size
  "scr": "{{ cart.currency.iso_code }}",  // Currency
  "scpp": "{{ product.price | money_without_currency }}",  // Product price

  // ID, variantID, price, and quantity of each item in the collection
  // Limit to 50 items
  "scc": "[{% for item in collection.products limit:50 %} { \\"id\\": \\"{{ item.id }}\\", \\"variantID\\": \\"{{ item.variant.id }}\\", \\"price\\": \\"{{ item.price | money_without_currency }}\\", \\"quantity\\": \\"{{ item.quantity }}\\" } {% unless forloop.last %},{% endunless %} {% endfor %}]",

  // ID, variantID, price, and quantity of each item in the cart
  // Limit to 50 items  
  "sca": "[{% for item in cart.items limit:50 %} { \\"id\\": \\"{{ item.product.id }}\\", \\"variantID\\": \\"{{ item.variant.id }}\\", \\"price\\": \\"{{ item.price | money_without_currency }}\\", \\"quantity\\": \\"{{ item.quantity }}\\" } {% unless forloop.last %},{% endunless %} {% endfor %}]"
}

Consent Configuration for Third-party Consent Banners (Optional)

If you are using a third-party consent banner, you may need to configure the following settings:

<aside> 💡 If not provided by the customer success team these can be left empty.

</aside>

Pixels and S2S Events Configuration

Configure the following attributes for pixels and S2S events:

<aside> 💡 If not provided by the customer success team these can be left empty.

</aside>

Script Tag Integration

You have two options for appending the script tags to your pages.

  1. Import the Script component as follows:
import { Script } from '@shopify/hydrogen';
  1. Add the script tags to your template, using Script instead of the standard script element:
<Script
  id="js-app-admq-data"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(admData) }}
></Script>
<Script
  id="js-app-admq-script"
  src="<https://shopify.admetrics.events/conversion-v1.min.js>"
  
	data-cn="{$data_cn}"
  data-cv="{$data_cv}"
  data-cv2="{$data_cv2}"
  
	data-pa-vendor="{$pa_vendor}"
  data-pa-mpid="{$facebook_pa_pixel}"
  data-ss-mpid="{$facebook_s2s_pixel}"
  data-ss-tkpid="{$snapchat_s2s_pixel}"
  data-ss-scpid="{$tiktok_s2s_pixel}"
></Script>

2. Order status page script integration

After appending the script tag with the data object to your pages, you can proceed to append the conversion script. The same options as described above are available for the conversion script integration.

<script id="js-app-admq-data" type="application/json">
{
    "sid": "{{ shop.id }}",
    "oid": "{{ checkout.order_id }}",
    "cid": "{{ customer.id }}",
    "on": "{{ checkout.order_name }}"
}
</script>
<script id="js-app-admq-script"
        src="<https://shopify.admetrics.events/conversion-v1.min.js>"
></script>