Magento

Magento Open Source and Adobe Commerce have a Scripts and Style Sheets field in the design configuration that prints HTML into the <head> of every storefront page, so no theme edits are needed. On 2.4.7 and later, checkout also needs a Content Security Policy entry.

Copy your tracking snippet

In OnyxMetric, open your site's Site Settings and copy the tracking script. It looks like this:

<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>

YOUR_SITE_ID is the numeric ID of your site.

Add the snippet to Magento

In the Admin sidebar, go to Content > Design > Configuration.
Find the row for the scope you want to track (usually the store view) and click Edit.
Expand HTML Head.
Paste the snippet at the end of Scripts and Style Sheets and click Save Configuration.
Go to System > Cache Management, refresh the invalidated cache types, and purge Varnish or your CDN if you use one.

Allow the script under CSP (2.4.7 and later)

Magento 2.4.7 put the checkout page (checkout_index_index) in CSP restrict mode. Other storefront pages stay report-only. Scripts from hosts that are not whitelisted are blocked on checkout, so whitelist the OnyxMetric host in a small module:

app/code/Vendor/OnyxMetric/etc/csp_whitelist.xml

<?xml version="1.0"?>
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
    <policies>
        <policy id="script-src">
            <values>
                <value id="onyxmetric" type="host">https://app.onyxmetric.com</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="onyxmetric" type="host">https://app.onyxmetric.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Run bin/magento setup:upgrade and flush the cache after adding the module.

Check that it works

Load your live site and click through a few pages. Pageviews show up in the OnyxMetric dashboard within seconds.

If nothing arrives:

View the page source and search for script.js?siteId= to confirm the tag is present.
In the browser's Network tab, check that script.js returns 200 and that requests go to /api/track.
Turn off ad blockers, or proxy the script through your own domain.
Read script troubleshooting for other causes.

Track purchases

The order success page renders Magento_Checkout::success.phtml, which reserves an order.success.additional.info container. Add a block to it from the same module.

app/code/Vendor/OnyxMetric/Block/Purchase.php

<?php
namespace Vendor\OnyxMetric\Block;

class Purchase extends \Magento\Checkout\Block\Onepage\Success
{
    public function getOrder(): \Magento\Sales\Model\Order
    {
        return $this->_checkoutSession->getLastRealOrder();
    }
}

app/code/Vendor/OnyxMetric/view/frontend/layout/checkout_onepage_success.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="order.success.additional.info">
            <block class="Vendor\OnyxMetric\Block\Purchase" name="onyxmetric.purchase" template="Vendor_OnyxMetric::purchase.phtml" cacheable="false"/>
        </referenceContainer>
    </body>
</page>

app/code/Vendor/OnyxMetric/view/frontend/templates/purchase.phtml

<?php
/** @var \Vendor\OnyxMetric\Block\Purchase $block */
$order = $block->getOrder();
if (!$order->getId()) {
    return;
}
$items = [];
foreach ($order->getAllVisibleItems() as $item) {
    $items[] = [
        'item_id'   => $item->getSku(),
        'item_name' => $item->getName(),
        'price'     => (float) $item->getPrice(),
        'quantity'  => (int) $item->getQtyOrdered(),
    ];
}
$purchase = [
    'transaction_id' => $order->getIncrementId(),
    'value'          => (float) $order->getGrandTotal(),
    'currency'       => $order->getOrderCurrencyCode(),
    'items'          => $items,
];
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
    window.onyx.event('purchase', <?= /* @noEscape */ json_encode($purchase) ?>);
});
</script>

The event waits for DOMContentLoaded because the tracker loads asynchronously. Event properties are capped at 2048 characters of JSON, so drop items for stores with large orders.

Troubleshooting

Tag not in the page source: design configuration is scoped, and a store-view row overrides the website and global rows. Edit the row that applies to the storefront you are checking, then flush the page cache and Varnish.
Tracked everywhere except checkout: CSP restrict mode on checkout_index_index is blocking the script. Confirm the whitelist module is enabled and look for Content-Security-Policy errors naming app.onyxmetric.com in the browser console.
Purchase event missing: getLastRealOrder() is only set in the session that placed the order, so reopening the success page later renders nothing.

Next steps

Track custom events such as signups, purchases, and clicks.
Identify users to tie sessions to accounts.
Proxy the script through your own domain to get past ad blockers.
Script attributes let you skip or mask URLs and tag events.