Перенос Google Tag Manager из Jinja2 во Vue3

Question

Имею бэкенд на Django 3.2 + Jinja2. Имею шаблон, основанный на стандартном GTM-сниппете.

{% if GTM_ID %}
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ GTM_ID }}" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>    
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','{{ GTM_ID }}');</script>
{% endif %}

Он втыкается прямо после тега <body> и исправно работает.

Имею фронтенд Vue 3 (Vite), при этом корневой HTML рендерится именно бэком. Грубо говоря вот такой шаблон

<html>
<head>
<link rel="stylesheet" href="{{ ASSETS_URL }}css/main.css"/>
</head>
<body>
{{ render_gtm()|safe }}
<div id="app"></div>
<script type="module" src="{{ ASSETS_URL }}js/main.js"></script>
</body>
</html>

где render_gtm это jinjaglobal, рендерящий шаблон из самого начала вопроса.

Общая задача - снизить зависимость от Jinja2 и утащить максимум кода во Vue 3.

Вопрос: Как правильно утащить GTM из Jinja2 во Vue компонент, чтобы не сломать ему инициализацию? Обязательно ли его втыкать в DOM или можно утащить в модуль? Поделитесь опытом.

Внутри GTM живут GA и ЯМ.

UPD: Вопрос о доставке GTM_ID на фронтенд не стоит. Имеется рабочий механизм. Представьте что это константа/литерал, известная на этапе синхронной загрузки страницы, скажем в скрипт внутри <head>. Вопрос только про практику интеграции самого GTM на фронте.

const gtm = getConfig('GTM_ID'); // вернёт строку 'GTM-XXXXXX'

Answer 1

Вопрос решился отказом от идеи выносить код GTM в фронтенд-бандл.

То есть для сохранения полной функциональности GTM даже в случае если JS клиента отключен, потребуется втыкание кода на стороне сервера и отдача клиенту уже готового HTML. Поэтому вариант только один.

С другой стороны вынос GTM в бандл не даёт практически ничего. Код не становится проще, а скорее наоборот вместо того чтобы сразу вставить готовый GTM, приходится пробрасывать на фронт GTM ID и т.д. Лишние манипуляции ради ничего.

БЛОГ НА HUSL

Перенос Google Tag Manager из Jinja2 во Vue3

Ответы (1 шт):