When using AnQiCMS, many users are concerned about how to conveniently integrate third-party JavaScript statistics code into the website page, such as Baidu statistics, Google Analytics, and so on.About this, AnQiCMS indeed provides built-in mechanisms and flexible template tags that allow you to easily call and display these statistics codes on your website.
Utilize the integrated JS code calling tag
AnQiCMS to meet the needs of website operators to integrate third-party scripts, especially for some services that require data submission or statistics through JavaScript, provides a special built-in tag.In the background function management, there is an option called "Link Push", which includes the function of "360/Toutiao and other JS automatic submission".Although this feature was initially designed for JS push links in search engines, its underlying implementation is a general JS code injection mechanism.
You just need to paste the complete JavaScript statistics code (including<script>and</script>The tag), the system will store it. Subsequently, in the front-end template of your website, you can call and display this code through a specific tag. This tag is{{- pluginJsCode|safe }}.
This tag is usually placed in the public template file of the website (such asbase.html）的<head>or within the tag</body>Before the end tag.|safeThe filter plays a crucial role here, telling the template engine that this content is safe HTML/JavaScript code that does not need to be escaped, thus ensuring that the statistical code can be correctly parsed and executed by the browser.This way, no matter which page of your website the user visits, the statistics code will automatically load and start collecting data.
Flexible invocation through customized system parameters
In addition to the built-in tags for specific scenarios, AnQiCMS also provides another more general method for managing and calling custom JS code, which is to use the 'Custom Parameters' feature in the 'Global Function Settings'.
In the background "Background Settings" -> "Global Function Settings", you can add custom parameters.For example, you can create a parameter named "AnalyticsCode" or "BaiduTongji" and paste your JS statistics code in the "Parameter Value" field.The advantage of this method lies in the ability to create multiple independent custom parameters to store different JS code snippets, such as one for Google Analytics, another for Baidu statistics, or any other JS script that needs to be globally loaded.
You can use these custom parameters when calling in the front-end template{% system with name="您自定义的参数名" %}tags as well, which need to be配合|safefor example:{% system analyticsCode with name="AnalyticsCode" %}{{analyticsCode|safe}}This way provides higher flexibility, you can control the loading location and conditions of each JS code snippet as needed, making website management more refined.
The difference between AnQiCMS's own traffic statistics and external JS statistics
It is worth mentioning that AnQiCMS itself also provides the core function of "traffic statistics and crawler monitoring", which can help users understand the access situation of the website and the crawling dynamics of search engine crawlers.But this is a system internal data analysis function, which is different from the concept of integrating third-party statistical tools (such as Google Analytics, Baidu Statistics, etc.) that we discussed.The built-in traffic statistics focus on providing basic data at the CMS system level, while integrating third-party JS statistics code allows you to use more professional and feature-rich external statistics services.
In summary, AnQiCMS provides specialpluginJsCodeLabel and flexible custom system parameter in two ways, fully meet your needs to call JS statistical code on the website page.These methods are very intuitive and easy to operate, simply configure them in the background, and introduce the corresponding tags in the template to seamlessly integrate third-party statistical code.
Frequently Asked Questions (FAQ)
Can I use multiple JS statistics codes on the website at the same time? For example, using Google Analytics and Baidu statistics.Certainly, it is completely possible. You can paste different statistical codes separately into the input boxes for '360/Toutiao and JS automatic submission' (if there is enough space and they do not conflict), or a more recommended approach is to create two independent custom parameters in the 'Global Function Settings', such as 'GoogleAnalyticsCode' and 'BaiduTongjiCode', and then paste the corresponding JS code into them.Finally, call these custom parameters separately in the template.
Where is the most appropriate position to place the JS statistics code in the template?Generally speaking, it is recommended to place the JS statistics code in the public template file of the website (such as
base.htmlor the main layout file) of<head>Tags inside, the sooner the better, to ensure they are executed as early as possible when the page loads and capture all access data. In some cases where large or complex statistical scripts may affect the page rendering speed, it can also be considered to place them inside</body>Before the closing tag, this can prevent blocking the rendering of page content. The specific location selection may need to be balanced according to the requirements of the statistical tool and your needs for website performance.Why are you using
{{- pluginJsCode|safe }}or{{自定义参数名|safe}}When, it must be added|safeThis filter?|safeThe filter is an important feature of the AnQiCMS template engine, which tells the system that the content processed by this filter is 'safe' HTML or JavaScript code and does not require automatic escaping. If it is missing|safeThe template engine will escape HTML tags (such as<script>/</>) and special characters in JavaScript code to HTML entities (such as<Will be escaped to<), causing the statistics code to not be recognized by the browser as executable script, thus failing. Therefore, it is added.|safeTo ensure that the statistical code can be executed as original JavaScript by the browser.