Frameworks

Eleventy

Eleventy 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.

#Add the script

1. #Add production data

   Create this global data file and set STICKYBEAK_SITE_ID for production builds. ELEVENTY_RUN_MODE requires Eleventy 2+.

   export default {
     siteId: process.env.STICKYBEAK_SITE_ID,
     enabled: process.env.ELEVENTY_RUN_MODE === "build" && Boolean(process.env.STICKYBEAK_SITE_ID),
   };

2. #Add it to the base layout

   Put this before </head> in _includes/base.njk or your shared layout. The same conditional works in Liquid.

   {% if stickybeak.enabled %}
   <script
     defer
     data-site="{{ stickybeak.siteId }}"
     data-domain="example.com"
     src="https://app.usestickybeak.com/_cfw/s.js"
   ></script>
   {% endif %}

3. #Build and deploy

   Run your normal production build and publish its output.

#Check it's working

Test the deployed site, then verify your install.

#Track goals

Add data-goal in templates or HTML inside Markdown. See Custom goals.

<a href="/subscribe/" data-goal="subscribe_click">Subscribe</a>

#Track purchases

On your confirmation page, send the final total and unique order ID:

<script>
window.stickybeak = window.stickybeak || function () { (window.stickybeak.q = window.stickybeak.q || []).push(arguments); };
window.stickybeak("purchase", { revenue: 49, currency: "USD", order_id: "ORDER_ID" });
</script>

Render real order values and see Revenue.

#If it isn't working

• CommonJS projects need module.exports instead of export default.
• Confirm STICKYBEAK_SITE_ID exists during the production build.

See Troubleshooting for the general list.