[Feature request] Add Google Tag Manager to VuePress 2

[rockbenben]

Clear and concise description of the problem

Is there a VuePress 2 plugin available that simplifies the deployment of Google Tag Manager, making it easier to incorporate various analytics and third-party service codes without the need to directly modify the template.html file?

Existing plugins appear to focus on individual analytics, making it inconvenient for potential future expansions.

Suggested solution

• Ability to add Google Tag Manager code to all pages of the VuePress 2 website.
• Integration process should be as straightforward as possible and should not require modification of the template.html file.

Alternative

No response

Additional context

No response

[Mister-Hope]

I think this can be a feature which can diving down to theme.

Any reference of docs about this?

[rockbenben]

I think this can be a feature which can diving down to theme.我认为这可能是一个可以深入主题的功能。

Any reference of docs about this?有关于这方面的文档参考吗？

Refer to step 5 on the page: https://support.google.com/tagmanager/answer/14847097

[Mister-Hope]

The problem is that:

1. a plugin does not have access to templateBuild
2. A plugin can not make a script tag appears first

2 new questions:

what are the tag manager for? Or what are you trying to do with it? I haven't find a clear feature list on the website.

Is it possible that only have it loaded in head, but probably after some other tags? Then a simple plugin can be made to eject the <script> tag to head.

[rockbenben]

With Google Tag Manager (GTM), you can effortlessly add, update, and manage various scripts—such as Google Analytics, AdWords Conversion Tracking, and custom HTML codes—without needing to alter your website's code.

I configure GA4, Piwik analytics codes, and InstantPage preloading JavaScripts in GTM. Before adopting GTM, these scripts had to be directly embedded in templateBuild. Now, GTM allows for centralized management of these scripts, not only optimizing page load speeds but also simplifying the modification of third-party service codes later on.

I initially presumed this plugin would function similarly to the Google Analytics plugin. If it's overly complex, we can prioritize it lower. Currently, my interim solution involves embedding the deployment code directly into templateBuild.

[Mister-Hope]

Is there any problem for adding

[
  'script',
  {},
  `\
((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-XXXXXXX');\
`,
],

inside head option of .vuepress/config.js file? GTM-XXXXXXX should be your actual ID.

What is not working in this case? @rockbenben

[Mister-Hope]

https://github.com/vuepress/ecosystem/pull/118

[rockbenben]

@Mister-Hope 5.2b is missing, the noscript section.

[Mister-Hope]

A plugin can never add a content like this when script is disabled, so for this part you must edit templateBuild by you own.

[Mister-Hope]

Might need to add some hints in docs