So Outside Technology Security CMS
AnQiCMS
Online Demonstration

How to safely embed third-party statistics or advertising JS code in AnQiCMS templates?

Calendar 👁️ 72

In website operation, we often need to rely on third-party statistical tools to analyze visitor behavior, or to obtain revenue through advertising platforms.Embed these third-party JavaScript (JS) codes securely and efficiently into the website template is a skill that every website operator needs to master.For those using AnQiCMS, understanding its template mechanism and built-in features can help us complete this task more securely.

AnQiCMS is an enterprise-level content management system developed based on the Go language, which has always paid great attention to performance and security from the beginning of its design.It provides a simple and efficient architecture that supports diversified content display and management.When embedding third-party JS code, we can fully utilize these features to find a balance between convenience and security.

Utilize the built-in AnQiCMS features: the preferred choice for safety and convenience

AnQiCMS provides a very convenient and relatively safe way to embed third-party statistics or advertising JS code, that is, through the "function management" module of the background.

When we need to integrate JS code such as Baidu Statistics, Google Analytics, or some advertising alliance, we usually need to place a piece of code on the website.<head>or<body>Within the tag. AnQiCMS has specially set up an area for '360/Toutiao and other JS automatic submission' under the 'Function Management' and 'Link Push' function.Although the name mentions a specific platform, this input box can actually be used to store any JS code snippet that needs to be globally embedded.

Specific operations:

  1. Log in to the AnQiCMS backend management interface.
  2. Find 'Function Management' in the left navigation bar.
  3. Click to enter the 'Link Push' page.
  4. There will be a text input box at the bottom labeled "360/Toutiao and other JS automatic submission". Enter the complete JS code (including<script>and</script>Paste the label into this input box.
  5. Save the settings.

Why is this method recommended?

Firstly, this method greatly enhancesSecurity. You do not need to directly touch the website template files, avoiding the risk of code errors or website crashes due to incorrect operations. Secondly, management onConvenienceIt is also self-evident that all JS code that needs to be globally embedded is concentrated in one place, making it convenient for unified management, updates, or deletion.

AnQiCMS processes this code and renders it on the front-end page through a name{{- pluginJsCode|safe }}The template tag, which injects the JS code you configure in the background securely into the page.This tag is usually placed in the public header or footer files of the website template, ensuring that the code loads normally on each page.Most official or officially developed AnQiCMS themes will default to include this tag, you do not need to perform any additional operations.

Directly edit the template file: Advanced customizable options

Even though built-in features are convenient, sometimes we may need to control the loading position, scope, or dynamically load scripts based on specific page logic more finely.In this case, directly editing the AnQiCMS template files becomes necessary.

The AnQiCMS template system uses a syntax similar to the Django template engine, using.htmlas the template file extension, and supportsincludeandextendsTags such as this provide us with modular development capabilities.

Common embedding locations and strategies:

  1. Global header JS (usually in)<head>within the tag):

    • Code that should be loaded early to ensure data accuracy (such as Google Analytics, Baidu Statistics).
    • Under the template root directory.bash.html(A public code file, usually containing headers, footers, and other inherited parts of all pages) of<head>Find the appropriate position to paste the code in the tag.
    • Or, to maintainbash.htmlKeep it tidy, you can create a separate JS snippet file, for examplepartial/scripts_head.htmlThen put the statistics code in it, and thenbash.htmlpass through{% include "partial/scripts_head.html" %}to refer to.
    • Example: 
      
{# template/你的模板/bash.html #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% tdk with name="Title" siteName=true %}</title>
    {# 其他头部内容... #}
    {% include "partial/scripts_head.html" %} {# 引用自定义头部JS片段 #}
</head>
<body>
    {# 网站主体内容 #}
</body>
</html>

      
{# template/你的模板/partial/scripts_head.html #}
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'YOUR_GA_ID');
</script>
{# 其他需要在头部加载的JS代码 #}

  2. Global bottom JS (usually before the</body>tag):

    • Code that does not affect page rendering, ads that can be loaded later, customer service chat plugins, or some unimportant statistical scripts.
    • Similarly, inbash.htmlthe file</body>Before the end tag, or throughincludeReference apartial/scripts_footer.htmlfile.
    • This method helps to improve the first screen loading speed of the page and enhance the user experience.

  3. Specific page JS:

    • If you need to load dedicated JS code on a specific page (such as a product details page, contact us page), you can edit the corresponding template file.
    • For example, the product details page usually corresponds to{模型table}/detail.htmlCorresponds to single page detail pagepage/detail.htmlYou can add code in these files.<head>or</body>Add code in the tag.
    • AnQiCMS's template inheritance mechanism allows you to overwrite the parent template in the child template.blockIfbash.htmlDefined a{% block custom_scripts %}{% endblock %}you can add in thedetail.htmlRewrite this block to insert a specific script.

Important hints in the operation:

  • Backup first:Before modifying any template file, you must backup the related files.You can edit the template online through the "Template Design" feature of the AnQiCMS backend, or you can directly modify it by connecting to the server via FTP/SFTP.
  • Version control: If you have a lot of customization for website templates, it is recommended to use Git and other tools for version control to trace and manage changes.
  • Note update:When updating the AnQiCMS system or template, the template files directly modified may be overwritten. Be sure to make a backup before updating and check and merge your changes after updating.
  • Performance consideration: Use as much as possibleasyncordeferProperties to load JS scripts, avoid blocking page rendering.
    
<script async src="your-script.js"></script>
<script defer src="your-other-script.js"></script>
  • Security precautions:Always obtain third-party JS code from a trusted official channel.Be vigilant of malicious scripts, which may steal user data, alter page content, or even carry out XSS attacks.AnQiCMS's own security mechanism can resist some attacks, but when embedding third-party code, you need to be responsible for the security of these codes.
  • Debugging and testing:After embedding the code, make sure to test the website's functionality on different browsers and devices, check the browser console for any JS errors.Utilize tools like Chrome DevTools to check page load performance, ensuring that third-party scripts do not slow down the website speed excessively.

Summary

Whether it is to choose the built-in functions provided by AnQiCMS or directly edit the template files, embedding third-party JS code safely and efficiently requires meticulous planning and rigorous operation. The built-in functions provide convenience and security, suitable for most general scenarios; while directly editing the template gives you the greatest flexibility and control, but also brings higher maintenance costs

Related articles

How to determine if the `Content` field of the document is empty using the `archiveDetail` tag and display alternative content?

How can you elegantly handle the case where the document content is empty in AnQi CMS?During the operation of the website, we often publish various types of documents, which contain important information.However, sometimes for various reasons, such as the content is still in draft stage, data is missing during import, or simply some documents are only titled without detailed text, we may encounter the situation where the `Content` field of the document is empty.If the template does not perform any processing when rendering these document detail pages, the user may see a blank page area, which not only affects user experience

2025-11-09

How to judge whether a custom field exists in the AnQiCMS template and conditionally render according to its value?

In AnQiCMS template development, flexibly displaying content is the key to improving user experience and website professionalism.Among them, judging custom fields and rendering conditions based on their values is an indispensable skill to achieve this goal.In this way, you can ensure the precise display of page content, avoid displaying empty values, or dynamically adjust the page layout and functionality based on specific data.### Understanding AnQiCMS Custom Fields and Their Retrieval Methods in Templates AnQiCMS is a powerful content management system

2025-11-09

How to skip certain items in the `for` loop of the AnQiCMS template based on specific conditions?

In AnQiCMS template development, we often need to display a series of contents, such as article lists, product lists, or navigation menus.But often, we do not want to display all the data at once, but rather hope to skip a part of it according to certain specific conditions, making the final content displayed more accurate and in line with the user's needs.AnQiCMS uses a syntax similar to the Django template engine, which provides a powerful and flexible tool for us to implement this conditional skipping.To implement `for`

2025-11-09

How to implement the `cycle` tag to alternate the display of different styles or data in AnQiCMS templates?

AnQiCMS provides many practical tags for template development, making content display more flexible and efficient.Among them, the `cycle` tag is such a clever tool that it can help us achieve the alternation of data or styles in loops, making the page content more dynamic and visually attractive. ### Understanding the `cycle` tag: Sequence controller in loops In web design, we often encounter situations where we need to apply different styles to repeating elements or display different types of data in a specific order. For example

2025-11-09

How to ensure the correct setting of the `hreflang` tag in the `languages` label of the AnQiCMS multilingual site?

Today, with the deepening of globalization, many enterprises and content operators need to provide customized content for users of different languages or regions.To ensure that these multilingual versions can be correctly identified and displayed to target users, the proper setting of the `hreflang` tag is particularly important.For friends using AnQiCMS to build multilingual websites, the built-in `languages` tag is the powerful tool to solve this problem.Understanding the importance of the `hreflang` tag To delve deeper into

2025-11-09

How to judge whether an array or string is empty in AnQiCMS template using the `length` filter?

In Anqi CMS template development, we often need to decide the display content of the page based on the existence or absence of data, for example, a list of articles. If the list is empty, we may need to display "No content" instead of a blank area.At this time, the `length` filter becomes our powerful assistant, which can help us easily judge whether arrays, strings, and other data are empty.### Getting to know the `length` filter The `length` filter is a very practical feature provided by the Anqi CMS template engine

2025-11-09

How to use the `join` filter in AnQiCMS template to handle empty arrays or arrays with a single element?

In AnQi CMS template development, the flexibility of data display is crucial.We often need to present the data list obtained from the backend in a beautiful and consistent manner on the front-end, which includes the need to concatenate the elements of an array (or list) into a string.The AnQi CMS template engine provides a powerful `join` filter, which not only handles common arrays containing multiple elements but also demonstrates its unique and practical behavior in special cases such as empty arrays or arrays containing only a single element.The `join` filter is a very practical tool in the Anqi CMS template

2025-11-09

How does the `split` filter handle empty strings or strings without the specified delimiter in AnQiCMS templates?

In AnQiCMS template development, string processing is a common requirement.Sometimes we need to split a string containing multiple values into individual items so that they can be traversed on the page for display or further processing.At this time, the `split` filter has become a powerful assistant for template developers.It can split a string into an array (or slice) based on a specified delimiter, greatly simplifying the logic of complex data display.However, some specific scenarios when using the `split` filter may confuse developers who are new to the field

2025-11-09