vuepressにGTM設定メモ。

手順

config.js のheaderを追加。GTM-1234567は適宜変更。

module.exports = {
    head: [
       ['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-1234567');
       `],
    ],

Layout.vue を編集。body直下にnoscriptタグを作成したいからprependで追加する。

beforeMount() {
    let recaptchaScript = document.createElement('noscript')
    recaptchaScript.innerHTML = '<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-1234567" height="0" width="0" style="display:none;visibility:hidden"></iframe>'
    document.body.prepend(recaptchaScript)
},

以上

参考ページ
https://quintagroup.com/blog/vuepress-customization (opens new window)