Magento (Adobe Commerce)
These instructions cover Magento Open Source and Adobe Commerce (2.4.x). You will install the snippet site-wide, then record purchases on the checkout success page.
Install the snippet
Your snippet comes from Project Settings → Snippet in the A vs B dashboard:
<script>window.avsb=window.avsb||{};window.avsb.q=window.avsb.q||[];window.avsb.ready=window.avsb.ready||function(f){window.avsb.q.push(f)};window.avsb.on=window.avsb.on||function(n,f){var t=['on',n,f];window.avsb.q.push(t);return function(){t[0]=null}};window.avsb.consent=window.avsb.consent||{set:function(s){window.avsb.q.push(['consent.set',s])},get:function(){return{}}};window.avsb.track=window.avsb.track||{};['event','segment','purchase','cart'].forEach(function(m){window.avsb.track[m]=window.avsb.track[m]||function(a,b){window.avsb.q.push(['track.'+m,a,b])}});(function(){window.avsb._t0=Date.now();window.avsb._df=fetch('https://cdn.avsb.cloud/YOUR_SNIPPET_KEY/datafile.json').catch(function(){});var d=document,e=d.documentElement,s=d.currentScript,a=s&&s.getAttribute('data-avsb-timeout'),t=a==null?3000:+a;if(!(t>0)||window.avsb.version)return;e.style.opacity='0';e.style.pointerEvents='none';window.avsb._t=setTimeout(function(){e.style.removeProperty('opacity');e.style.removeProperty('pointer-events')},t)})();</script><script src="https://cdn.avsb.cloud/snippet.js?id=YOUR_SNIPPET_KEY" data-avsb="YOUR_SNIPPET_KEY" async></script>The first tag is a stub that makes avsb.ready(...), avsb.on(...) and avsb.consent.set(...) calls safe before the bundle loads. Paste both tags when installing.
Option 1: Admin (no code)
Open the design configuration
In the Magento admin, go to Content → Design → Configuration. Click Edit next to the store view you want to install on.
Add the script to HTML Head
Expand the HTML Head section and paste the snippet tag into the Scripts and Style Sheets field.
Save and flush cache
Click Save Configuration, then flush the cache (System → Cache Management → Flush Magento Cache).
Option 2: Layout XML (for themes/modules)
If you manage storefront changes in code, add the stub inline and the loader via layout XML. The stub must be pasted directly into a <block> template because layout XML does not support inline scripts. For the loader, use default_head_blocks.xml:
<!-- app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml --><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <script src="https://cdn.avsb.cloud/snippet.js?id=YOUR_SNIPPET_KEY" src_type="url" async="true"/> </head></page>Add the stub script via a small template block in your head layout override so that avsb.ready(...) calls on product pages are always safe.
Whichever option you use, load the snippet as early as possible in the head. A variation is the version of the page a visitor was assigned to see. The earlier the snippet loads, the less chance a visitor sees a flash of the wrong page before their variation is applied.
Record purchases
Option 1: dataLayer auto-collect (if you run GTM)
Many Magento stores already push a GA4 purchase event to window.dataLayer through a GTM/GA4 extension. If yours does, A vs B can turn those pushes into purchase records automatically, with no extra tag. Turn it on with the Read purchases from your data layer switch under Project settings → Configuration → Advanced settings, or by setting autoCollectDataLayer to true through the Projects API. See Tracking Revenue for the recognised shapes.
Option 2: explicit call on the success page
Add a block to the checkout success page (checkout_onepage_success.xml) that renders a small template reading the last order from the checkout session:
<!-- app/design/frontend/<Vendor>/<theme>/Magento_Checkout/layout/checkout_onepage_success.xml --><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="Magento\Checkout\Block\Onepage\Success" name="avsb.purchase" template="Vendor_Module::avsb-purchase.phtml"/> </referenceContainer> </body></page><?php /* avsb-purchase.phtml */$order = $block->getLayout() ->createBlock(\Magento\Checkout\Block\Onepage\Success::class) ->getOrder() ?? null;// Simpler in practice: inject Magento\Checkout\Model\Session and call getLastRealOrder().?><script> avsb.ready(function () { avsb.track.purchase({ orderId: '<?= $block->escapeJs($order->getIncrementId()) ?>', total: <?= (float) $order->getGrandTotal() ?>, currency: '<?= $block->escapeJs($order->getOrderCurrencyCode()) ?>', subtotal: <?= (float) $order->getSubtotal() ?>, shipping: <?= (float) $order->getShippingAmount() ?>, tax: <?= (float) $order->getTaxAmount() ?> }); });</script>orderId and total (a decimal, for example 49.99) are required. Everything else is optional. Orders are deduplicated by orderId, and the newest write always wins. A page refresh never double-counts an order, so instrumenting both the dataLayer and the explicit call is harmless.
Verify
Place a test order. Then open Commerce → Orders in the A vs B dashboard (see the orders & attribution guide) to confirm it arrived. It should show as attributed to an exposure (the moment a visitor was counted in an experiment, usually when they saw the part being tested).