How to configure custom analytics - 51la #6888

W1ndys · 2024-03-08T18:22:42Z

W1ndys
Mar 8, 2024

I have arranged the js footer file, and it seems to be error-free, but on the 51la platform, it can't pass the code detection and displays "No code detected".

My project address
https://github.com/W1ndys/xkzb.qfnu.w1ndys.top

https://v6.51.la/

Answered by kamilkrzyskow

Mar 9, 2024

Instead of using the extra_javascript in mkdocs.yml, use main.html override with extrahead block, as said in the comment above:

#6888 (reply in thread)

As for the syntax look here for reference:

#6881

View full answer

W1ndys · 2024-03-08T18:25:40Z

W1ndys
Mar 8, 2024
Author

I suspect it's the location,Another question is how do I add js to the tag?

1 reply

kamilkrzyskow Mar 9, 2024
Collaborator

Another question is how do I add js to the tag?

You can add custom <script> tags in your main.html template override, in the libs or extrahead blocks:
https://squidfunk.github.io/mkdocs-material/customization/#overriding-blocks

But there is also the custom.html analytics partial:
https://squidfunk.github.io/mkdocs-material/setup/setting-up-site-analytics/#custom-site-analytics

kamilkrzyskow · 2024-03-09T02:07:28Z

kamilkrzyskow
Mar 9, 2024
Collaborator

Looking at the source view-source:https://xkzb.qfnu.w1ndys.top/ you can see that all files are properly linked

<script src="assets/javascripts/bundle.c8d2eff1.min.js"></script>
<script src="javascripts/extra.js"></script>
<script src="javascripts/51la.js"></script>

However, the issue is that CORS is blocking the connection:

Seen in the browser Dev Tools console.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed

I can't read Chinese, so it would be good if you've provided what 51.la is, but ChatGPT says it's some sort of tracking analytics thing.
I guess you have to somehow whitelist your domain https://xkzb.qfnu.w1ndys.top/ on some sort of management back panel in your 51.la account.

This is definitely outside the scope of this discussions board, so best look for help in 51.la forums ✌️

7 replies

W1ndys Mar 9, 2024
Author

Thank you. I saw in the background that it seems to be running normally. I don't know what the reason was before. Maybe there was a delay in code detection.

In addition, I have another question. In the official documentation of 51la, it is recommended to insert script into the <head> tag. In material, how to insert external js into the <head> tag?

kamilkrzyskow Mar 9, 2024
Collaborator

Instead of using the extra_javascript in mkdocs.yml, use main.html override with extrahead block, as said in the comment above:

How to configure custom analytics - 51la #6888 (reply in thread)

As for the syntax look here for reference:

announcement bar - relative link? #6881

Answer selected by W1ndys

W1ndys Mar 9, 2024
Author

ohhhhh, ok thanks!!!!

W1ndys Mar 9, 2024
Author

Thank you very much for your help, I have implemented this function, I have added it to the <head> tag

But I still have some questions about the syntax of custom.html.
What do provide and property stand for respectively? property may represent the authentication ID of site statistics? Can I create html at will inside the overrides directory and import it into mkdocs.yml

For example:
I created an overrides/W1ndys1/W1ndys2.html
Then configure it in mkdocs.yml as follows:

extra:
   W1ndys1:
     provider: W1ndys2
     .....

Is this possible?

I tested it and found that it seemed to have no effect. Does this prove that my writing method is wrong?

I saw some explanations of variables in the document, but I am not sure whether these variables are only used to write main.html or whether all html in overrides need to follow these variable syntax.

W1ndys Mar 9, 2024
Author

I seem to understand, does it only support the following content?

.
├─ .icons/                             # Bundled icon sets
├─ assets/
│  ├─ images/                          # Images and icons
│  ├─ javascripts/                     # JavaScript files
│  └─ stylesheets/                     # Style sheets
├─ partials/
│  ├─ integrations/                    # Third-party integrations
│  │  ├─ analytics/                    # Analytics integrations
│  │  └─ analytics.html                # Analytics setup
│  ├─ languages/                       # Translation languages
│  ├─ actions.html                     # Actions
│  ├─ alternate.html                   # Site language selector
│  ├─ comments.html                    # Comment system (empty by default)
│  ├─ consent.html                     # Consent
│  ├─ content.html                     # Page content
│  ├─ copyright.html                   # Copyright and theme information
│  ├─ feedback.html                    # Was this page helpful?
│  ├─ footer.html                      # Footer bar
│  ├─ header.html                      # Header bar
│  ├─ icons.html                       # Custom icons
│  ├─ language.html                    # Translation setup
│  ├─ logo.html                        # Logo in header and sidebar
│  ├─ nav.html                         # Main navigation
│  ├─ nav-item.html                    # Main navigation item
│  ├─ pagination.html                  # Pagination (used for blog)
│  ├─ palette.html                     # Color palette toggle
│  ├─ post.html                        # Blog post excerpt
│  ├─ progress.html                    # Progress indicator
│  ├─ search.html                      # Search interface
│  ├─ social.html                      # Social links
│  ├─ source.html                      # Repository information
│  ├─ source-file.html                 # Source file information
│  ├─ tabs.html                        # Tabs navigation
│  ├─ tabs-item.html                   # Tabs navigation item
│  ├─ tags.html                        # Tags
│  ├─ toc.html                         # Table of contents
│  ├─ toc-item.html                    # Table of contents item
│  └─ top.html                         # Back-to-top button
├─ 404.html                            # 404 error page
├─ base.html                           # Base template
├─ blog.html                           # Blog index page
├─ blog-archive.html                   # Blog archive index page
├─ blog-category.html                  # Blog category index page
├─ blog-post.html                      # Blog post page
└─ main.html                           # Default page

And the above picture describes only the writing methods supported in main.html

kamilkrzyskow Mar 9, 2024
Collaborator

but I am not sure whether these variables are only used to write main.html or whether all html in overrides need to follow these variable syntax.

If by "variables" you mean "blocks" then they are limited to the main.html file. All of the blocks are defined in the base.html

mkdocs-material/src/templates/base.html

Lines 172 to 173 in fdeafbb

    
           <!-- Custom front matter --> 
        
           {% block extrahead %}{% endblock %}

and main.html extends the base.html allowing to override the blocks with additional content or fully replace them.

mkdocs-material/src/templates/main.html

Line 23 in fdeafbb

{% extends "base.html" %}

Basically main.html is used to build your docs, and loads the base.html in an action chain.

But I still have some questions about the syntax of custom.html.
What do provide and property stand for respectively? property may represent the authentication ID of site statistics? Can I create html at will inside the overrides directory and import it into mkdocs.yml

The base.html template loads the built-in analytics.html partial:

mkdocs-material/src/templates/base.html

Lines 156 to 159 in fdeafbb

    
           <!-- Analytics --> 
        
           {% block analytics %} 
        
             {% include "partials/integrations/analytics.html" %} 
        
           {% endblock %}

and later the analytics.html partial loads other files based on the values provided in mkdocs.yml

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

Lines 23 to 30 in fdeafbb

    
           <!-- Determine analytics provider --> 
        
           {% if config.extra.analytics %} 
        
             {% set provider = config.extra.analytics.provider %} 
        
           {% endif %} 
        
           <!-- Set up analytics provider --> 
        
           {% if provider %} 
        
             {% include "partials/integrations/analytics/" ~ provider ~ ".html" %}

So after setting:

extra:
  analytics:
    provider: google
    property: G-XXXXXXXXXX

the config.extra.analytics.provider will hold the google value and later it will be used to include the "partials/integrations/analytics/google.html" file. Later the google.html partial uses the property to include it within the analytics script.

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

Lines 23 to 26 in fdeafbb

    
           <!-- Determine analytics property --> 
        
           {% if config.extra.analytics %} 
        
             {% set property = config.extra.analytics.property | d("", true) %} 
        
           {% endif %}

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

Line 36 in fdeafbb

gtag("config", "{{ property }}")

Therefore you can add:

extra:
  analytics:
    provider: custom
    authentication_id: 51laID
    special_property: 'special value'

And it will load the "partials/integrations/analytics/custom.html" partial, and you will be able to pass the values over to the custom script.

The files are Jinja2 templates that combine special syntax with HTML.
https://jinja.palletsprojects.com/en/3.0.x/templates/

jamesirichard90 · 2024-09-30T06:12:50Z

jamesirichard90
Sep 30, 2024

What are the best ways to configure custom analytics tracking for one of our client's website: lussoleather.com to gain deeper insights into user behavior and optimize our marketing efforts?

2 replies

alexvoss Sep 30, 2024
Collaborator Sponsor

Please do not hijack an existing discussion but open a new one - with a specific question relevant to Material for MkDocs and enough information that people would actually be able to answer, as well as motivated to do so. What have you considered / tried, what do you mean by "custom" and what are the requirements and constraints?

squidfunk Sep 30, 2024
Maintainer

The page doesn't even seem to be built with Material for MkDocs – I'm afraid we can't provide general web development or marketing support here for free. It might be a better idea to ask this question on StackOverflow. Thank you!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to configure custom analytics - 51la #6888

{{title}}

Replies: 3 comments 10 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

How to configure custom analytics - 51la #6888

W1ndys Mar 8, 2024

Replies: 3 comments · 10 replies

W1ndys Mar 8, 2024 Author

kamilkrzyskow Mar 9, 2024 Collaborator

kamilkrzyskow Mar 9, 2024 Collaborator

W1ndys Mar 9, 2024 Author

kamilkrzyskow Mar 9, 2024 Collaborator

W1ndys Mar 9, 2024 Author

W1ndys Mar 9, 2024 Author

W1ndys Mar 9, 2024 Author

kamilkrzyskow Mar 9, 2024 Collaborator

jamesirichard90 Sep 30, 2024

alexvoss Sep 30, 2024 Collaborator Sponsor

squidfunk Sep 30, 2024 Maintainer

W1ndys
Mar 8, 2024

Replies: 3 comments 10 replies

W1ndys
Mar 8, 2024
Author

kamilkrzyskow Mar 9, 2024
Collaborator

kamilkrzyskow
Mar 9, 2024
Collaborator

W1ndys Mar 9, 2024
Author

kamilkrzyskow Mar 9, 2024
Collaborator

W1ndys Mar 9, 2024
Author

W1ndys Mar 9, 2024
Author

W1ndys Mar 9, 2024
Author

kamilkrzyskow Mar 9, 2024
Collaborator

jamesirichard90
Sep 30, 2024

alexvoss Sep 30, 2024
Collaborator Sponsor

squidfunk Sep 30, 2024
Maintainer