Django-minify-html breaks Google Analytics injection

I'm running into an issue and would appreciate some pointers. I have a production Django app where I included Google Analytics using a context processor and conditionally render it in my base.html template like this:

    <!-- Google Analytics -->
    {% if GOOGLE_ANALYTICS_ID %}
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ GOOGLE_ANALYTICS_ID }}"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', '{{ GOOGLE_ANALYTICS_ID }}');
    </script>
    {% endif %}
    <!-- End Google Analytics -->

Everything was working fine but the GA tracking completely breaks after enabling django_minify_html

These are my current settings:

For base.py:

USE_MINIFICATION = DJANGO_ENV == "production"
MINIFY_HTML = {
    "enabled": USE_MINIFICATION,
    "remove_comments": True,
    "minify_js": False,
    "minify_css": True,
}

For production.py

from .base import MIDDLEWARE as BASE_MIDDLEWARE

MIDDLEWARE = list(BASE_MIDDLEWARE)
# Insert MinifyHtmlMiddleware after WhiteNoiseMiddleware 
try:
    whitenoise_index = MIDDLEWARE.index("whitenoise.middleware.WhiteNoiseMiddleware")
    MIDDLEWARE.insert(whitenoise_index + 1, "django_minify_html.middleware.MinifyHtmlMiddleware")
except ValueError:
    try:
        security_index = MIDDLEWARE.index("django.middleware.security.SecurityMiddleware")
        MIDDLEWARE.insert(security_index + 1, "django_minify_html.middleware.MinifyHtmlMiddleware")
    except ValueError:
        MIDDLEWARE.insert(0, "django_minify_html.middleware.MinifyHtmlMiddleware")

Has anyone encountered this before? I've minify_js to False in hopes to exclude the GA script but keep on getting the console error.

Would love to hear any tips or workarounds for the best way to exclude GA tracking code from compression/minification.

Thanks!

Root of problem

The problem is that django_minify_html minifies your HTML, including Google analytics JavaScript code, even then minify_js=False is set.

How fix

  1. First ensure you are using latest version of file, try updating your django_minify_html with command pip install --upgrade django-minify-html.
  2. Wrap the code with <!-- !minify-html-preserve --> instead of <!-- Google Analytics --> it will tell django, to skip code between lines thats how to do it:
<!-- !minify-html-preserve -->
{% if GOOGLE_ANALYTICS_ID %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ GOOGLE_ANALYTICS_ID }}"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', '{{ GOOGLE_ANALYTICS_ID }}');
</script>
{% endif %}
<!-- !minify-html-preserve-end -->
  1. Also can try "verbatim" if the issue stayed:
{% if GOOGLE_ANALYTICS_ID %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ GOOGLE_ANALYTICS_ID }}"></script>
<script>
{% verbatim %}
   window.dataLayer = window.dataLayer || [];
   function gtag() { dataLayer.push(arguments); }
   gtag('js', new Date());
   gtag('config', '{{ GOOGLE_ANALYTICS_ID }}');
{% endverbatim %}
</script>
{% endif %}

Test each solution, to see, which solution resolves the issue.

Вернуться на верх