The Shopify Pixel Adapter exposes a single function in the global context that can be used to push events to the existing Datma Pixel from non-Shopify managed storefronts.

dtmPixel.push(eventType, eventData)

Both arguments are required.

The eventType string argument should have one of the following values, matching the events supported by the Datma Pixel:

checkout_completed
checkout_started
collection_viewed
page_viewed
product_added_to_cart
product_viewed
search_submitted

For each event type, the caller must provide an event payload object for the eventData argument. This object's structure must match the event payload described in the official Shopify documentation.

Basic client-side event validation is performed by the adapter script, and the function call will throw an exception if the eventData value doesn't match the expected format.

To include the Pixel Adapter to the storefront, the following snippet can be added at the end of the HEAD section:

<script src="https://tracker.datma.io/tracker/adapter.<SHOP_ID>.js" type="module" async></script>

The Pixel Adapter script will load the Datma Tracking Pixel in a Web Worker that asynchronously handles event processing and calls to the event collector endpoints.

Code samples for each supported event type

checkout_completed

dtmPixel.push('checkout_completed', {
 "checkout": {
 "attributes": [],
 "discountApplications": [],
 "lineItems": [
 {
 "discountAllocations": [],
 "quantity": 1,
 "id": "52f21e687f069b5dbf1a2ed7d2a05af1",
 "title": "Test Product",
 "variant": {
 "price": {
 "amount": 100,
 "currencyCode": "USD"
 },
 "product": {
 "title": "Test Product",
 "vendor": "dhtma-test-store",
 "id": "6676298727582",
 "untranslatedTitle": "Test Product",
 "url": "/products/test-product",
 "type": "Odd cubes"
 },
 "id": "39745893433502",
 "image": {
 "src": "https://cdn.shopify.com/s/files/1/0563/6302/4542/products/images3.jpg?v=1619473773"
 },
 "sku": "",
 "title": "Default Title",
 "untranslatedTitle": "Default Title"
 }
 }
 ],
 "totalTax": {
 "amount": 0,
 "currencyCode": "USD"
 },
 "transactions": [
 {
 "amount": {
 "amount": 150,
 "currencyCode": "USD"
 },
 "gateway": "bogus"
 }
 ],
 "billingAddress": {
 "address1": "-",
 "address2": "-",
 "city": "-",
 "country": "United States",
 "countryCode": "US",
 "firstName": null,
 "lastName": "-",
 "phone": null,
 "province": "-",
 "provinceCode": "-",
 "zip": null
 },
 "currencyCode": "USD",
 "email": "[email protected]",
 "order": {
 "customer": {
 "id": "5499695071390",
 "isFirstOrder": null
 },
 "id": "6127020441758"
 },
 "phone": null,
 "shippingAddress": {
 "address1": "-",
 "address2": "-",
 "city": "-",
 "country": "United States",
 "countryCode": "US",
 "firstName": null,
 "lastName": "-",
 "phone": null,
 "province": "-",
 "provinceCode": "-",
 "zip": null
 },
 "shippingLine": {
 "price": {
 "amount": 0,
 "currencyCode": "USD"
 }
 },
 "subtotalPrice": {
 "amount": 150,
 "currencyCode": "USD"
 },
 "token": "c22bf00a70e9aaf975feebb5ab510b37",
 "totalPrice": {
 "amount": 150,
 "currencyCode": "USD"
 }
 }
});

checkout_started

dtmPixel.push('checkout_started', {
 "checkout": {
 "buyerAcceptsEmailMarketing": false,
 "buyerAcceptsSmsMarketing": false,
 "attributes": [],
 "billingAddress": {
 "address1": null,
 "address2": null,
 "city": null,
 "country": "US",
 "countryCode": "US",
 "firstName": null,
 "lastName": null,
 "phone": null,
 "province": "B",
 "provinceCode": "B",
 "zip": null
 },
 "token": "c22bf00a70e9aaf975feebb5ab510b37",
 "currencyCode": "USD",
 "discountApplications": [],
 "discountsAmount": {
 "amount": 0,
 "currencyCode": "USD"
 },
 "email": "",
 "phone": "",
 "lineItems": [
 {
 "discountAllocations": [],
 "id": "39745893433502",
 "quantity": 1,
 "title": "Test Product",
 "variant": {
 "id": "39745893433502",
 "image": {
 "src": "https://cdn.shopify.com/s/files/1/0563/6302/4542/products/images3_64x64.jpg?v=1619473773"
 },
 "price": {
 "amount": 150,
 "currencyCode": "USD"
 },
 "product": {
 "id": "6676298727582",
 "title": "Test Product",
 "vendor": "datma-test-store",
 "type": "Odd cubes",
 "untranslatedTitle": "Test Product",
 "url": "/products/test-prodict"
 },
 "sku": "p1",
 "title": "Size L",
 "untranslatedTitle": "Size L"
 },
 "finalLinePrice": {
 "amount": 150,
 "currencyCode": "USD"
 },
 "sellingPlanAllocation": null,
 "properties": []
 }
 ],
 "localization": {
 "country": {
 "isoCode": "US"
 },
 "language": {
 "isoCode": "en"
 },
 "market": {
 "id": "gid://shopify/Market/3188457630",
 "handle": "us"
 }
 },
 "delivery": {
 "selectedDeliveryOptions": []
 },
 "shippingAddress": {
 "address1": null,
 "address2": null,
 "city": null,
 "country": "US",
 "countryCode": "US",
 "firstName": null,
 "lastName": null,
 "phone": null,
 "province": "B",
 "provinceCode": "B",
 "zip": null
 },
 "subtotalPrice": {
 "amount": 150,
 "currencyCode": "USD"
 },
 "shippingLine": {
 "price": {
 "amount": 0,
 "currencyCode": "USD"
 }
 },
 "smsMarketingPhone": null,
 "totalTax": {
 "amount": 0,
 "currencyCode": "USD"
 },
 "totalPrice": {
 "amount": 150,
 "currencyCode": "USD"
 },
 "transactions": []
 }
})

collection_viewed

dtmPixel.push('collection_viewed', {
 "collection": {
 "id": "265623994526",
 "title": "Cube collection #1",
 "productVariants": [
 {
 "price": {
 "amount": 99,
 "currencyCode": "USD"
 },
 "product": {
 "title": "Test product",
 "vendor": "datma-test-store",
 "id": "6676298563742",
 "untranslatedTitle": "Test product",
 "url": "/products/test-product",
 "type": "Odd cubes"
 },
 "id": "39745892909214",
 "image": {
 "src": "//datma-test.myshopify.com/cdn/shop/products/download5.jpg?v=1619473768"
 },
 "sku": "p1",
 "title": "Default Title",
 "untranslatedTitle": "Default Title"
 },
 {
 "price": {
 "amount": 119,
 "currencyCode": "USD"
 },
 "product": {
 "title": "Test product 2",
 "vendor": "datma-test-store",
 "id": "6676298301598",
 "untranslatedTitle": "Test product 2",
 "url": "/products/test-product-2",
 "type": ""
 },
 "id": "39745892352158",
 "image": {
 "src": "//dhatma-test.myshopify.com/cdn/shop/products/images8.jpg?v=1619473762"
 },
 "sku": "p2",
 "title": "Default Title",
 "untranslatedTitle": "Default Title"
 }
 ]
 }
})

page_viewed

dtmPixel.push('page_viewed', {})

No additional context is required in this case, the Pixel will use the `document.location` and `document.referrer` values.

product_added_to_cart

dtmPixel.push('product_added_to_cart', {
 "cartLine": {
 "cost": {
 "totalAmount": {
 "amount": 100,
 "currencyCode": "USD"
 }
 },
 "merchandise": {
 "id": "42230788620446", // Product variant ID
 "image": {
 "src": "https://cdn.shopify.com/s/files/1/0563/6302/4542/products/download2.jpg?v=1619473775"
 },
 "price": {
 "amount": 100,
 "currencyCode": "USD"
 },
 "product": {
 "id": "6676298858654",
 "title": "Test product",
 "vendor": "datma-test-store",
 "type": "",
 "untranslatedTitle": "Test product",
 "url": "/products/test-product?variant=42230788620446"
 },
 "sku": "p1",
 "title": "Size S", // Variant title
 "untranslatedTitle": "Size S"
 },
 "quantity": 1
 }
})

product_viewed

dtmPixel.push('product_viewed', {
 "productVariant": {
 "price": {
 "amount": 100,
 "currencyCode": "USD"
 },
 "product": {
 "title": "Test Product",
 "vendor": "datma-test-store",
 "id": "6676298924190",
 "untranslatedTitle": "Test Product",
 "url": "/products/test-product",
 "type": "Odd cubes"
 },
 "id": "42326363144350", // Variant ID
 "image": {
 "src": "//dhatma-test.myshopify.com/cdn/shop/products/download.png?v=1619473777"
 },
 "sku": "p1",
 "title": "Size S",
 "untranslatedTitle": "Size S"
 }
})

search_submitted

dtmPixel.push('search_submitted', {
 "searchResult": {
 "query": "test",
 "productVariants": [
 {
 "price": {
 "amount": 100,
 "currencyCode": "USD"
 },
 "product": {
 "title": "Test Product",
 "vendor": "datma-test",
 "id": "7496702427294",
 "untranslatedTitle": "Test Product",
 "url": "/products/test-product?_pos=1",
 "type": ""
 },
 "id": "42606799126686", // Variant ID
 "image": null,
 "sku": "p1",
 "title": "Default Title",
 "untranslatedTitle": "Default Title"
 },
 {
 "price": {
 "amount": 200,
 "currencyCode": "USD"
 },
 "product": {
 "title": "Test Product 2",
 "vendor": "datma-test-store",
 "id": "6676298727582",
 "untranslatedTitle": "Test Product 2",
 "url": "/products/test-product-2?_pos=3",
 "type": "Odd cubes"
 },
 "id": "39745893433502",
 "image": {
 "src": "//dhatma-test.myshopify.com/cdn/shop/products/images3.jpg?v=1619473773"
 },
 "sku": "p2",
 "title": "Size S",
 "untranslatedTitle": "Size S"
 }
 ]
 }
})