🔧[Nuxt3]Using Google Tag manager with NUXT3
2023-01-20
nuxt.config.js
GTM-* is your GTM ID.
GTM ID is generated from tagmanager.google.com.
export default defineNuxtConfig({
ssr: true,
target: 'static',
srcDir: "src/",
app: {
cdnURL: '/',
head: {
script: [
{
hid: 'gtmHead',
innerHTML: `
(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-*');`,
},
],
},
},Tag Manager
Link to tagmanager.google.com
Fill in the Form and click "Create".
agree to the terms and conditions.
You can get the code.
Copy the code below and paste it onto every page of your website.
Paste this code as high in the <head> of the page as possible:
<!-- Google Tag Manager -->
<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-*');</script>
<!-- End Google Tag Manager -->Additionally, paste this code immediately after the opening <body> tag:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-*"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->For more information about installing the Google Tag Manager snippet, visit our Quick Start Guide .
Check View Source
Check install using chrome plugin
Link to Tag Assistant Legacy (by Google) 
Ref.
https://blog.becom.co.jp/2022/05/nuxtjsgoogle-tag-maneger.html
Related Notes✨supabase with Vue3 ✨Vue3 with bootstrap-icons✨[vue3]Install bootstrap5✨[vue3] install✨[Nuxt3]The first thing I do when launching a nuxt3 project. (^3.5.2)✨[Nuxt3][Bootstrap]Use Bootstrap icons with Nuxt3.✨[Node.js] Storing API results in js🔧[GA4][GTM]Configure GA4 in GTM🔧[GA4][BigQuery]Linking GA4 and BigQuery🔧When you want to scrape a SPA site, PhantomJsCloud is solution.🐛Error brew -v | update-reset🔧Use Google Spreadsheet as API with Nuxt3.🔧 Get json from a spreadsheet using GoogleSheetsAPI v4.🔧[Python]Install Python to Mac✨[Nuxt3]Install stable version of Nuxt 3.0.0. | npx nuxi init nuxt3-app✨Make Ranking with MySQL✨watch & v-model | Vue3 (Nuxt3)✨window & document | Nuxt3✨Using custom domain, Hosting to GitHub Pages with Nuxt3✨GA4 with Nuxt3📝MySQL - Date Function - Tips ✨Use Nuxt3 props🔧Use MicroCMS with Nuxt3🔧Using GoogleFont with Nuxt3📝Error - Deprecation Warning: $weight: Passing a number without unit % (100) is deprecated. - Bootstrap5 📝using sass with nuxt📝Firebase9 Google Authentication with Nuxt3.📝Set favicon in Nuxt3📝Use bootstrap5 with Nuxt3🐛Error Code: 1290. The MySQL server is running with the --secure-file-priv option so it cannot execute this statement✨[Nuxt3] How to separate source directories✨microCMS & GitHub Actions & Nuxt3✨Using highlight in Nuxt3.✨use package.json value🔧frontmatter-markdown-loader & highlight.js🔧Install Font Awesome on Nuxt2 via npm.✨Github pages with GitHub Actions✨Cannot find module '~/*/*.vue' or its corresponding type declarations.Vetur(2307)🐛Cannot find module. Consider using '--resolveJsonModule' to import module with '.json' extension.ts(2732)✨TypeScript Object.🔧Bootstrap5 with Nuxt2✨processmd with Nuxt2🔧[MySQL]Install MySQL Workbench🔧Convert Markdown to HTML. convert frontmatter to json🔧Install homebrew, nvm, node to Mac🔧[MySQL]Record of installing and starting mysql with homebrew.🎨 Display the photo full screen and overlay the header and footer on top.🔧Set git repository to created project.✨[Nuxt3] Make Header & Footer
Masanos
I want to make the world I see happy. Little by little, I am preparing to start a business. Thank you for your support.
Copyright© masanos All Rights Reserved.