archiveFiltersCan the tag integrate third-party traffic statistics tools to track the usage of the filtering function?

RevelationarchiveFiltersThe operation mechanism of the tag

First, let's reviewarchiveFiltersThe role of tags in AnQi CMS. According todesign-tag.mdthe description of the document,archiveFiltersThe label is mainly used for 'filter conditions for list combination based on various document parameters'.Imagine that you are running a real estate information website, where users can filter listings by various dimensions such as 'property type' (residential, commercial), 'area' (downtown, suburban), and 'price range'.archiveFiltersThe tag is responsible for generating the HTML structure of these filter options on the front end, usually represented as a series of clickable links.

The strength lies in its ability to combine content models to customize fields, dynamically generate these filtering conditions, and provide users with an extremely flexible browsing experience.When the user clicks on a filter condition, the system will reload the document list that meets the selection, greatly enhancing the discoverability of the content and user satisfaction.

The value of tracking the filter behavior

Why should we track the usage of these filtering features?As operators, we do not want these exquisite designs to be just 'ornaments'.

  • Optimizing user experience: Which filtering conditions are used most frequently? Which combinations are the most popular? This data can guide us in optimizing the layout of the filter, default options, and even in adding or removing some filter dimensions.
  • Content strategy adjustment:If the click-through rate of the 'Sea View Room' filter is extremely high, this may mean that we should invest more resources in producing and promoting content related to sea view rooms.
  • SEO opportunity mining:Popular filter combinations may represent strong search intent from users, which can provide inspiration for our keyword strategy and new category planning.
  • Conversion path analysis:By combining backend data, we can analyze which filtering paths ultimately led to consultations or orders, thereby optimizing the entire user journey.

The 'Traffic Statistics and Spider Monitoring' feature of AnQi CMS provides an overall view of the website's traffic, but it usually focuses on macro data such as page visits and sources, and cannot finely capture the micro-interactions of users with dynamic elements like filters inside the page.This leads to the need to integrate third-party statistical tools.

archiveFiltersThe integration of tags with third-party statistical tools

Return to the core issue:archiveFiltersCan the tag itself directly integrate third-party traffic statistical tools?

From a technical perspective,archiveFiltersThe tag is a server-side rendering template tag.It runs on the server, generates HTML code, and then sends these HTML codes to the user's browser.In this process, it does not directly interact with the JavaScript statistical code running on the client, nor can it actively send data to third-party statistical platforms (such as Google Analytics, Baidu Statistics, etc.).

However, this does not mean that we cannot track. The answer is yes, we can track throughClient JavaScriptthe way, cleverly achieve the implementation ofarchiveFiltersThe usage of the generated filtering function is tracked. The flexible template editing capability of Anqi CMS (such asdesign-director.mdanddesign-tag.md), is the key to achieving our goal.

The core idea is:

  1. LetarchiveFiltersTag generates recognizable HTML structure: archiveFiltersTags will generate an option for each one when filtering output options:<a href="...">Tags. These tags are the carriers of our tracking of user click behavior.
  2. Embed tracking codes of third-party statistical tools:Ensure your website template (usually)base.htmlor useincludeThe public header file introduced by the tag has correctly embedded the basic tracking code of third-party statistical tools, such as Google Analytics'sgtag.jsoranalytics.js.
  3. Write a client-side JavaScript event listener:Using JavaScript (such as jQuery or native JS), we can listen for byarchiveFiltersThese filter link click events generated by the tag. Capture this click and extract relevant information when the user clicks.
  4. Send data to a third-party statistical tool:After capturing click events and relevant information, through the JavaScript API provided by statistical tools (such as Google Analytics'gtag('event', ...)Send this data as an "Event".

Specific operation path (conceptual steps):

  • First step: Determine the tracking element.CheckarchiveFiltersThe HTML structure generated. It providesval.Link(link address) andval.Label(Filter option text label), this is very useful information.We can add specific class or data attributes to these filter links so that JavaScript scripts can identify and bind events more easily.archiveFiltersofforIn the loop, you can add for each<li>or<a>adddata-filter-name="{{ item.Name }}"anddata-filter-value="{{ val.Label }}"such properties.

  • Second step: Introduce JavaScript in the AnQiCMS template.While usingarchiveFiltersTemplate files of tags (for examplearchive/list.htmlorproduct/list.html) at the bottom, or throughincludeWrite event listening code in the JS file.

  • Step three: write event listening logic.

    {# 假设你的筛选链接由 archiveFilters 生成，并带有 class="filter-option" #}
{% archiveFilters filters with moduleId="1" allText="默认" %}
    {% for item in filters %}
    <ul>
        <li>{{item.Name}}: </li>
        {% for val in item.Items %}
        <li class="{% if val.IsCurrent %}active{% endif %}">
            <a href="{{val.Link}}" class="filter-option" data-filter-category="{{item.Name}}" data-filter-value="{{val.Label}}">{{val.Label}}</a>
        </li>
        {% endfor %}
    </ul>
{% endfor %}
{% endarchiveFilters %}


<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterLinks = document.querySelectorAll('.filter-option');
    filterLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            const filterCategory = this.dataset.filterCategory; // 获取筛选器类别
            const filterValue = this.dataset.filterValue;     // 获取筛选值


            // 以 Google Analytics 4 (GA4) 为例发送事件
            if (typeof gtag === 'function') {
                gtag('event', 'filter_used', {
                    'event_category': 'Content Filtering',
                    'event_label': `${filterCategory}: ${filterValue}`,
                    'value': 1 // 可以根据需要自定义值
                });
                console.log(`GA Event Sent: Category: Content Filtering, Label: ${filterCategory}: ${filterValue}`);
            }
            // 如果使用其他统计工具，替换为对应的 API 调用
            // 例如：百度统计 _hmt.push(['_trackEvent', 'Content Filtering', 'Filter Click', `${filterCategory}:${filterValue}`]);
        });
    });
});
</script>

    This script will traverse all elements with the attribute after the page has loaded.filter-optionLink the class and add click event listeners to them.When the user clicks on these links, it will retrieve the filtered category and value and send it as event data to Google Analytics.

Summary

Although the Anqi CMS'sarchiveFilters

Frequently Asked Questions (FAQ)

  1. Question: Do you need very professional development knowledge to integrate third-party traffic statistics to trackarchiveFiltersthe usage situation?Answer: This indeed requires a certain amount of client-side JavaScript coding knowledge, especially understanding the event tracking API of the third-party analytics tool you are using.If you are not familiar with front-end development, you may need to seek help from a professional developer or use some existing general event tracking code snippets from the internet to modify them.The AnQi CMS template system is sufficiently flexible, allowing you to freely insert these codes.

  2. Ask: Can I use other third-party statistics tools, such as Baidu Statistics or Matomo, to track?_hmt.push(['_trackEvent', ...])or Matomo's_paq.push(['trackEvent', ...])as needed.

  3. Question: Can the "Traffic Statistics and Spider Monitoring" feature built-in to AnqiCMS trackarchiveFiltersusage?Answer: The integrated traffic statistics function of Anqi CMS mainly provides overall website access data, such as