Hydrogen integration

Getting started

Required setup

Optional setup

Tutorials and examples

More information

Frequently asked questions

Metrics overview

User journey tracking

Product level metrics

Tags 📓Data Updates

← How to enable tracking and consent

Manual Integration of Hydrogen Themes with Admetrics

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.

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.

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.

💡

Check our documentation on how to get the parameters with GraphQL and JavaScript.

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:

data_cn: Name of the Cookie or LocalStorage object.
data_cv: Value of the Cookie/LocalStorage when consent is provided.
data_cv2: Alternatively, the value of the Cookie/LocalStorage when consent is provided.

💡

If not provided by the customer success team these can be left empty.

Pixels and S2S Events Configuration

Configure the following attributes for pixels and S2S events:

data-pa-vendor: A list of vendors to be fired as a comma-separated string (e.g., fb,snapchat,tiktok , where fb stands ffor Facebook and Meta).
data-pa-mpid: The Facebook/Meta pixel ID.
data-ss-mpid: The Facebook/Meta S2S pixel ID.
data-ss-tkpid: The Snapchat S2S pixel ID.
data-ss-scpid: The TikTok S2S pixel ID.

💡

If not provided by the customer success team these can be left empty.

Script Tag Integration

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

Import the Script component as follows:

import { Script } from '@shopify/hydrogen';

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.

Open the admin page of your shop (e.g. example.myshopify.com/admin).
Go to Settings → Checkout and accounts → Order status page
Add the following snippet to Order status page → Additional scripts:

<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>

Save the changes