Capture search terms with Plausible.io

[white-gorilla]

Hello,

I am currently testing Plausible a more GDPR compliant alternative to GA4.
It works pretty well. The thing I can't do is capture the search terms. Do you have any experience with that? Do you think it's possible?

Thanks for your help.

[squidfunk]

Good question. Looping in @notpushkin due to his work on #4847.

[white-gorilla]

Thanks @squidfunk.

Note that I don't use the plugin of @notpushkin.
The integration of the script is very simple and flexible. It allows me to freely add or remove modules (local, tagged-events, etc.) and to manage the 404s.

Here is an example with tracking on the glightbox image zoom.

overrides/main.html

{% block scripts %}
<!-- Add scripts that need to run before here -->
{{ super() }}
<!-- Add scripts that need to run afterwards here -->
<!-- Plausible analytics. Remove `.local` from the `scr` if you don't want local tracking -->
<script defer data-domain="ai.lefebvre-sarrut.eu" src="https://plausible.io/js/script.local.outbound-links.tagged-events.js"></script>
<!-- 404 error pages tracking -->
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
<!-- Custom event goals -->
<script>
    const toTag = [
        {
            attributeName: 'class',
            attributeValue: 'glightbox',
            classes: 'plausible-event-name=Click+Image plausible-event-zoom=In'
        }
    ]

    document.addEventListener('DOMContentLoaded', function (_e) {
        toTag.forEach(function (tagObject) {
            const elements = document.querySelectorAll('[' + tagObject.attributeName + '="' + tagObject.attributeValue + '"]')
            elements.forEach(function (element) {
                tagObject.classes.split(' ').forEach(function (className) {
                    element.classList.add(className)
                })
            })
        })
    })
</script>
{% endblock %}

[notpushkin]

I think the easier option would be to send a custom event manually (tl;dr: call plausible("Search", { props: { query } }) when the search happens). You can see my plugin's integration of Mkdocs-Material feedback form with Plausible as a starting point.

However I'm not sure how easy would it be to hook into the search form, maybe @squidfunk has any ideas?
(If you figure it out, I'll be happy to accept a merge request :-)

[squidfunk]

I'm not sure how easy would it be to hook into the search form

Very simple:

mkdocs-material/src/partials/integrations/analytics/google.html

Lines 42 to 49 in 9653719

	/* Set up search tracking */
	if (document.forms.search) {
	var query = document.forms.search.query
	query.addEventListener("blur", function() {
	if (this.value)
	gtag("event", "search", { search_term: this.value })
	})
	}

[notpushkin]

Nice! Seems to work with Plausible too: https://plausible.aedge.dev/material-plausible-plugin.ale.sh?goal=Search

I'll update the docs and release a new version in a bit.

[notpushkin]

@white-gorilla material-plausible-plugin now supports search tracking 🎉

[white-gorilla]

Thank you @squidfunk , thank you @notpushkin.