Custom Analytics and Feedback with umami

[rehborn]

• umami

i'm certain this can be done with less template/css overwriting in the current release, however for those who may need it.

looks pretty similar to the current implementation:

will give you the feedback by page (path), (page) title and feedback value:

recipe

add 2 optional environment variables for host and id:
mkdocs.yml

extra:
  analytics:
    host: !ENV UMAMI_HOST  # analytics.example.com
    id: !ENV UMAMI_ID  # uuid

set UMAMI_HOST and UMAMI_ID as variable in github actions and pass accordingly:
workflow

      - name: Build
        run: |
          uv run mkdocs build
          tar cf payload.tar -C site/ .
        env:
          UMAMI_HOST: ${{ vars.UMAMI_HOST }}
          UMAMI_ID: ${{ vars.UMAMI_ID }}

add custom feedback html to the content section and custom javascript to the scripts section:
overrides/main.html

{% block content %}
{{ super() }}
<div class="center" id="feedback">
    <div>
        Was this page helpful?
    </div>
    <div>
        <button data-umami-event="Feedback"
                data-umami-event-page="/{{ page.url }}"
                data-umami-event-title="{{ page.title }}"
                data-umami-event-value="positive">
        <span class="twemoji">
            {% include ".icons/fontawesome/solid/face-smile-beam.svg" %}
        </span>
        </button>

        <button data-umami-event="Feedback"
                data-umami-event-page="/{{ page.url }}"
                data-umami-event-title="{{ page.title }}"
                data-umami-event-value="neutral">
        <span class="twemoji">
            {% include ".icons/fontawesome/solid/face-meh.svg" %}
        </span>
        </button>
        <button data-umami-event="Feedback"
                data-umami-event-page="/{{ page.url }}"
                data-umami-event-title="{{ page.title }}"
                data-umami-event-value="negative">
        <span class="twemoji">
            {% include ".icons/fontawesome/solid/face-frown.svg" %}
        </span>
        </button>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}

{% if config.extra.analytics.host and config.extra.analytics.id %}
<script defer>
    const umamiHost = "{{ config.extra.analytics.host }}";
    const umamiId = "{{ config.extra.analytics.id }}";

    document.addEventListener("DOMContentLoaded", function () {
        const script = document.createElement('script');
        script.src = "https://" + umamiHost + "/script.js";
        script.setAttribute("data-website-id", umamiId);
        script.defer = true;
        document.head.appendChild(script);
    })
    feedback = document.getElementById('feedback');
    feedback.addEventListener("click", function (e) {
        feedback.innerHTML = "<b>Thanks for your feedback!</b>";
    })
</script>
{% endif %}

{% endblock %}

additional css:
extra.css

#feedback > div {
    font-weight: bold;
    color: #afafaf;
}

#feedback button > span {
    font-size: 1.6em;
    color: #afafaf;
    cursor: pointer;
    margin: 15px;
}

#feedback button:first-child > span:hover {
    color: #00d200;
}
#feedback button:nth-child(2) > span:hover {
    color: #ffcc00;
}

#feedback button:nth-child(3) > span:hover {
    color: #c41637;
}