Frameworks

MkDocs

MkDocs 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. #Point the theme at an overrides folder

   theme:
     name: material
     custom_dir: overrides

   Use your own theme's name if it isn't material. The built-in mkdocs and readthedocs themes support this too.

2. #Extend the head block

   Create overrides/main.html:

   {% extends "base.html" %}
   
   {% block extrahead %}
     {{ super() }}
     <script
       defer
       data-site="YOUR_SITE_ID"
       data-domain="example.com"
       src="https://app.usestickybeak.com/_cfw/s.js"
     ></script>
   {% endblock %}

3. #Build and deploy

   mkdocs serve runs on 127.0.0.1, which isn't counted. Run mkdocs build or mkdocs gh-deploy as usual.

#Check it's working

Test the deployed site, then verify your install.

#Track goals

Enable attr_list, then add data-goal to Markdown links. See Custom goals.

markdown_extensions:
  - attr_list

[Create your account](https://app.example.com/signup){ data-goal="docs_signup_click" }

#Track purchases

After confirming an order in the browser, send:

window.stickybeak?.("purchase", { revenue: 49, currency: "USD", order_id: "ORDER_ID" });

Use real values; see Revenue.

#Page changes

Material navigation.instant counts new paths; same-page headings do not. See Single-page apps.

#If it isn't working

Check the production site ID and domain, then see Troubleshooting.