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.
2. 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:
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, wherefbstands 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.data-ss-ob: Enable Outbrain S2S events by setting it to "1".
💡 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
Scriptcomponent as follows:
import { Script } from '@shopify/hydrogen'; 2. 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
Enable advanced integration features like Predictive Audiences and Server-to-Server connections for Meta/Facebook and Outbrain. By adding specific attributes to your script tags, you can optimize conversion tracking and enhance data accuracy. Read the full article: Attributes for Pixels and S2S Events.