Backends

Magento and Adobe Commerce

Magento analytics with Stickybeak starts by adding its script to your rendered pages; this guide shows you where it belongs and how to track page views, goals and purchase revenue. It is a lighter alternative to Google Analytics for Magento, with live visitors, goals and revenue attribution in one script.

#Add the script

1. #Open the head settings

   In the admin, go to Content → Design → Configuration, click Edit on your store view, and expand Other Settings → HTML Head.

2. #Paste the Magento conversion tracking snippet

   Copy your snippet from Settings in the Stickybeak dashboard and paste it into Scripts and Style Sheets:

   <script
     defer
     data-site="YOUR_SITE_ID"
     data-domain="example.com"
     src="https://app.usestickybeak.com/_cfw/s.js"
   ></script>

3. #Save and flush the cache

   Click Save Configuration, then refresh the invalidated caches under System → Cache Management.

This setting is stored in each environment's database, so add it on production only and staging stays out of your numbers.

#Check it's working

Save the production store-view configuration and refresh invalidated caches under System → Cache Management before checking. Follow Verify your install for the full check.

#Track goals

Add data-goal to a link or button in the rendered template. See Custom goals.

#Track purchases

The order success page knows the order that was just placed.

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Acme_Stickybeak', __DIR__);

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Acme_Stickybeak"/>
</config>

<?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="Acme\Stickybeak\Block\Purchase" name="stickybeak.purchase"
                   template="Acme_Stickybeak::purchase.phtml" cacheable="false"/>
        </referenceContainer>
    </body>
</page>

<?php
namespace Acme\Stickybeak\Block;

use Magento\Checkout\Model\Session;
use Magento\Framework\View\Element\Template;

class Purchase extends Template
{
    public function __construct(Template\Context $context, private Session $checkoutSession, array $data = [])
    {
        parent::__construct($context, $data);
    }

    public function getPurchase(): ?array
    {
        $order = $this->checkoutSession->getLastRealOrder();
        if (!$order || !$order->getId()) {
            return null;
        }
        return [
            'revenue'  => (float) $order->getGrandTotal(),
            'currency' => $order->getOrderCurrencyCode(),
            'order_id' => $order->getIncrementId(),
        ];
    }
}

<?php
/** @var \Acme\Stickybeak\Block\Purchase $block */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
$purchase = $block->getPurchase();
if ($purchase) {
    $json = json_encode($purchase, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
    $script = 'window.addEventListener("DOMContentLoaded", function () {'
        . 'if (typeof window.stickybeak === "function") window.stickybeak("purchase", ' . $json . ');'
        . '});';
    echo $secureRenderer->renderTag('script', [], $script, false);
}

Enable it and deploy:

bin/magento module:enable Acme_Stickybeak
bin/magento setup:upgrade
bin/magento cache:flush

$secureRenderer adds the CSP nonce so the inline script is allowed, and the JSON_HEX_* flags keep the values safe inside it.

See Revenue.

#If it isn't working

Magento sends a Content Security Policy, and on checkout pages it's enforced.

<?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="stickybeak" type="host">https://app.usestickybeak.com</value></values>
        </policy>
        <policy id="connect-src">
            <values><value id="stickybeak" type="host">https://app.usestickybeak.com</value></values>
        </policy>
    </policies>
</csp_whitelist>

More on CSP in Troubleshooting.

• Magento enforces CSP on checkout. Allow https://app.usestickybeak.com in script-src and connect-src.

See Troubleshooting.