[{"data":1,"prerenderedAt":866},["ShallowReactive",2],{"post-nuxt2-google-tag-manager-setup":3},{"id":4,"title":5,"body":6,"date":853,"description":854,"extension":855,"meta":856,"navigation":253,"path":862,"seo":863,"stem":864,"__hash__":865},"blog\u002Fblog\u002Fnuxt2-google-tag-manager-setup.md","Nuxt.js v2でGoogle Tag Managerを導入する",{"type":7,"value":8,"toc":835},"minimark",[9,13,21,24,28,98,101,106,122,125,136,139,143,157,167,175,198,202,205,348,356,360,363,412,418,422,425,428,431,549,552,555,684,688,694,793,796,805,808,828,831],[10,11,12],"h2",{"id":12},"はじめに",[14,15,16,20],"p",{},[17,18,19],"code",{},"@nuxtjs\u002Fgoogle-tag-manager","は既に廃止されており、代替ライブラリの導入が必要です。本記事では、Nuxt.js v2でGTMを導入する方法を解説します。",[10,22,23],{"id":23},"ライブラリの選定",[25,26,27],"h3",{"id":27},"調査結果",[29,30,31,47],"table",{},[32,33,34],"thead",{},[35,36,37,41,44],"tr",{},[38,39,40],"th",{},"ライブラリ",[38,42,43],{},"状態",[38,45,46],{},"理由",[48,49,50,69,85],"tbody",{},[35,51,52,57,60],{},[53,54,55],"td",{},[17,56,19],{},[53,58,59],{},"❌",[53,61,62],{},[63,64,68],"a",{"href":65,"rel":66},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@nuxtjs\u002Fgoogle-tag-manager",[67],"nofollow","公式に廃止済み",[35,70,71,76,78],{},[53,72,73],{},[17,74,75],{},"nuxt-community\u002Fgtm-module",[53,77,59],{},[53,79,80],{},[63,81,84],{"href":82,"rel":83},"https:\u002F\u002Fgithub.com\u002Fnuxt-community\u002Fgtm-module\u002Fissues\u002F160#issuecomment-1333076308",[67],"Nuxt 3未サポート",[35,86,87,92,95],{},[53,88,89],{},[17,90,91],{},"@gtm-support\u002Fvue2-gtm",[53,93,94],{},"✅",[53,96,97],{},"Vue 2\u002F3両対応、移行容易",[25,99,100],{"id":100},"採用ライブラリ",[14,102,103,105],{},[17,104,91],{},"を採用します。理由は以下の通りです。",[107,108,109,116,119],"ul",{},[110,111,112,115],"li",{},[17,113,114],{},"@gtm-support\u002Fvue-gtm","（Vue 3版）と設定方法が同じ",[110,117,118],{},"Nuxt 3への移行が容易",[110,120,121],{},"アクティブにメンテナンスされている",[10,123,124],{"id":124},"想定読者",[107,126,127,130,133],{},[110,128,129],{},"Nuxt.js v2でGTMを導入したい方",[110,131,132],{},"Nuxt.js v3への移行を検討している方",[110,134,135],{},"既存のGTMライブラリから移行したい方",[10,137,138],{"id":138},"導入手順",[25,140,142],{"id":141},"_1-パッケージのインストール","1. パッケージのインストール",[14,144,145],{},[146,147,148,149,152,153,156],"strong",{},"⚠️ 警告：Webpack 4以上を使用している場合は、バージョン",[17,150,151],{},"@1.3.0","を指定してください。",[17,154,155],{},"2.0.0","では以下のエラーが発生します。",[158,159,164],"pre",{"className":160,"code":162,"language":163},[161],"language-text","You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.\n","text",[17,165,162],{"__ignoreMap":166},"",[14,168,169,170],{},"詳細: ",[63,171,174],{"href":172,"rel":173},"https:\u002F\u002Fgithub.com\u002Fgtm-support\u002Fvue-gtm\u002Fissues\u002F280#issuecomment-1402707099",[67],"GitHub Issue #280",[158,176,180],{"className":177,"code":178,"language":179,"meta":166,"style":166},"language-bash shiki shiki-themes github-light github-dark","npm install @gtm-support\u002Fvue2-gtm@1.3.0\n","bash",[17,181,182],{"__ignoreMap":166},[183,184,187,191,195],"span",{"class":185,"line":186},"line",1,[183,188,190],{"class":189},"sScJk","npm",[183,192,194],{"class":193},"sZZnC"," install",[183,196,197],{"class":193}," @gtm-support\u002Fvue2-gtm@1.3.0\n",[25,199,201],{"id":200},"_2-nuxt-pluginの作成","2. Nuxt Pluginの作成",[14,203,204],{},"クライアントサイドのみで動作するプラグインを作成します。",[158,206,210],{"className":207,"code":208,"language":209,"meta":166,"style":166},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F plugins\u002Fgtm.js\nimport VueGtm from '@gtm-support\u002Fvue2-gtm'\nimport Vue from 'vue'\n\nexport default () => {\n  Vue.use(VueGtm, {\n    id: 'GTM-XXXXXXX', \u002F\u002F GTMコンテナIDを設定\n    enabled: true,      \u002F\u002F 開発環境では false に設定可能\n    debug: process.env.NODE_ENV !== 'production', \u002F\u002F 開発時はデバッグモード\n  })\n}\n","javascript",[17,211,212,218,235,248,255,273,285,300,316,336,342],{"__ignoreMap":166},[183,213,214],{"class":185,"line":186},[183,215,217],{"class":216},"sJ8bj","\u002F\u002F plugins\u002Fgtm.js\n",[183,219,221,225,229,232],{"class":185,"line":220},2,[183,222,224],{"class":223},"szBVR","import",[183,226,228],{"class":227},"sVt8B"," VueGtm ",[183,230,231],{"class":223},"from",[183,233,234],{"class":193}," '@gtm-support\u002Fvue2-gtm'\n",[183,236,238,240,243,245],{"class":185,"line":237},3,[183,239,224],{"class":223},[183,241,242],{"class":227}," Vue ",[183,244,231],{"class":223},[183,246,247],{"class":193}," 'vue'\n",[183,249,251],{"class":185,"line":250},4,[183,252,254],{"emptyLinePlaceholder":253},true,"\n",[183,256,258,261,264,267,270],{"class":185,"line":257},5,[183,259,260],{"class":223},"export",[183,262,263],{"class":223}," default",[183,265,266],{"class":227}," () ",[183,268,269],{"class":223},"=>",[183,271,272],{"class":227}," {\n",[183,274,276,279,282],{"class":185,"line":275},6,[183,277,278],{"class":227},"  Vue.",[183,280,281],{"class":189},"use",[183,283,284],{"class":227},"(VueGtm, {\n",[183,286,288,291,294,297],{"class":185,"line":287},7,[183,289,290],{"class":227},"    id: ",[183,292,293],{"class":193},"'GTM-XXXXXXX'",[183,295,296],{"class":227},", ",[183,298,299],{"class":216},"\u002F\u002F GTMコンテナIDを設定\n",[183,301,303,306,310,313],{"class":185,"line":302},8,[183,304,305],{"class":227},"    enabled: ",[183,307,309],{"class":308},"sj4cs","true",[183,311,312],{"class":227},",      ",[183,314,315],{"class":216},"\u002F\u002F 開発環境では false に設定可能\n",[183,317,319,322,325,328,331,333],{"class":185,"line":318},9,[183,320,321],{"class":227},"    debug: process.env.",[183,323,324],{"class":308},"NODE_ENV",[183,326,327],{"class":223}," !==",[183,329,330],{"class":193}," 'production'",[183,332,296],{"class":227},[183,334,335],{"class":216},"\u002F\u002F 開発時はデバッグモード\n",[183,337,339],{"class":185,"line":338},10,[183,340,341],{"class":227},"  })\n",[183,343,345],{"class":185,"line":344},11,[183,346,347],{"class":227},"}\n",[14,349,350,351],{},"公式ドキュメント: ",[63,352,355],{"href":353,"rel":354},"https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002Fdirectory-structure\u002Fplugins\u002F",[67],"Nuxt.js Plugins Directory",[25,357,359],{"id":358},"_3-nuxtconfigjsへの登録","3. nuxt.config.jsへの登録",[14,361,362],{},"プラグインをクライアントモードで登録します。",[158,364,366],{"className":207,"code":365,"language":209,"meta":166,"style":166},"\u002F\u002F nuxt.config.js\nexport default {\n  plugins: [\n    { src: '~\u002Fplugins\u002Fgtm.js', mode: 'client' },\n  ],\n}\n",[17,367,368,373,381,386,403,408],{"__ignoreMap":166},[183,369,370],{"class":185,"line":186},[183,371,372],{"class":216},"\u002F\u002F nuxt.config.js\n",[183,374,375,377,379],{"class":185,"line":220},[183,376,260],{"class":223},[183,378,263],{"class":223},[183,380,272],{"class":227},[183,382,383],{"class":185,"line":237},[183,384,385],{"class":227},"  plugins: [\n",[183,387,388,391,394,397,400],{"class":185,"line":250},[183,389,390],{"class":227},"    { src: ",[183,392,393],{"class":193},"'~\u002Fplugins\u002Fgtm.js'",[183,395,396],{"class":227},", mode: ",[183,398,399],{"class":193},"'client'",[183,401,402],{"class":227}," },\n",[183,404,405],{"class":185,"line":257},[183,406,407],{"class":227},"  ],\n",[183,409,410],{"class":185,"line":275},[183,411,347],{"class":227},[14,413,414,417],{},[17,415,416],{},"mode: 'client'","を指定することで、サーバーサイドレンダリング時には読み込まれません。",[25,419,421],{"id":420},"_4-gtm管理画面での設定","4. GTM管理画面での設定",[14,423,424],{},"以上でNuxt.js側の設定は完了です。残りの設定（タグ、トリガー、変数など）は、GTM管理画面で行います。",[10,426,427],{"id":427},"カスタムイベントの送信",[14,429,430],{},"ページ遷移以外のイベントを送信する場合は、以下のように実装します。",[158,432,434],{"className":207,"code":433,"language":209,"meta":166,"style":166},"\u002F\u002F コンポーネント内\nexport default {\n  methods: {\n    trackButtonClick() {\n      this.$gtm.trackEvent({\n        event: 'button_click',\n        category: 'engagement',\n        action: 'click',\n        label: 'signup_button',\n        value: 1,\n      })\n    }\n  }\n}\n",[17,435,436,441,449,454,462,476,487,497,507,517,527,532,538,544],{"__ignoreMap":166},[183,437,438],{"class":185,"line":186},[183,439,440],{"class":216},"\u002F\u002F コンポーネント内\n",[183,442,443,445,447],{"class":185,"line":220},[183,444,260],{"class":223},[183,446,263],{"class":223},[183,448,272],{"class":227},[183,450,451],{"class":185,"line":237},[183,452,453],{"class":227},"  methods: {\n",[183,455,456,459],{"class":185,"line":250},[183,457,458],{"class":189},"    trackButtonClick",[183,460,461],{"class":227},"() {\n",[183,463,464,467,470,473],{"class":185,"line":257},[183,465,466],{"class":308},"      this",[183,468,469],{"class":227},".$gtm.",[183,471,472],{"class":189},"trackEvent",[183,474,475],{"class":227},"({\n",[183,477,478,481,484],{"class":185,"line":275},[183,479,480],{"class":227},"        event: ",[183,482,483],{"class":193},"'button_click'",[183,485,486],{"class":227},",\n",[183,488,489,492,495],{"class":185,"line":287},[183,490,491],{"class":227},"        category: ",[183,493,494],{"class":193},"'engagement'",[183,496,486],{"class":227},[183,498,499,502,505],{"class":185,"line":302},[183,500,501],{"class":227},"        action: ",[183,503,504],{"class":193},"'click'",[183,506,486],{"class":227},[183,508,509,512,515],{"class":185,"line":318},[183,510,511],{"class":227},"        label: ",[183,513,514],{"class":193},"'signup_button'",[183,516,486],{"class":227},[183,518,519,522,525],{"class":185,"line":338},[183,520,521],{"class":227},"        value: ",[183,523,524],{"class":308},"1",[183,526,486],{"class":227},[183,528,529],{"class":185,"line":344},[183,530,531],{"class":227},"      })\n",[183,533,535],{"class":185,"line":534},12,[183,536,537],{"class":227},"    }\n",[183,539,541],{"class":185,"line":540},13,[183,542,543],{"class":227},"  }\n",[183,545,547],{"class":185,"line":546},14,[183,548,347],{"class":227},[10,550,551],{"id":551},"環境別の設定",[14,553,554],{},"開発環境とプロダクション環境で異なるGTMコンテナを使用する場合：",[158,556,558],{"className":207,"code":557,"language":209,"meta":166,"style":166},"\u002F\u002F plugins\u002Fgtm.js\nimport VueGtm from '@gtm-support\u002Fvue2-gtm'\nimport Vue from 'vue'\n\nexport default () => {\n  const gtmId = process.env.NODE_ENV === 'production'\n    ? 'GTM-PROD-XXX'\n    : 'GTM-DEV-XXX'\n\n  Vue.use(VueGtm, {\n    id: gtmId,\n    enabled: true,\n    debug: process.env.NODE_ENV !== 'production',\n  })\n}\n",[17,559,560,564,574,584,588,600,622,630,638,642,650,655,663,675,679],{"__ignoreMap":166},[183,561,562],{"class":185,"line":186},[183,563,217],{"class":216},[183,565,566,568,570,572],{"class":185,"line":220},[183,567,224],{"class":223},[183,569,228],{"class":227},[183,571,231],{"class":223},[183,573,234],{"class":193},[183,575,576,578,580,582],{"class":185,"line":237},[183,577,224],{"class":223},[183,579,242],{"class":227},[183,581,231],{"class":223},[183,583,247],{"class":193},[183,585,586],{"class":185,"line":250},[183,587,254],{"emptyLinePlaceholder":253},[183,589,590,592,594,596,598],{"class":185,"line":257},[183,591,260],{"class":223},[183,593,263],{"class":223},[183,595,266],{"class":227},[183,597,269],{"class":223},[183,599,272],{"class":227},[183,601,602,605,608,611,614,616,619],{"class":185,"line":275},[183,603,604],{"class":223},"  const",[183,606,607],{"class":308}," gtmId",[183,609,610],{"class":223}," =",[183,612,613],{"class":227}," process.env.",[183,615,324],{"class":308},[183,617,618],{"class":223}," ===",[183,620,621],{"class":193}," 'production'\n",[183,623,624,627],{"class":185,"line":287},[183,625,626],{"class":223},"    ?",[183,628,629],{"class":193}," 'GTM-PROD-XXX'\n",[183,631,632,635],{"class":185,"line":302},[183,633,634],{"class":223},"    :",[183,636,637],{"class":193}," 'GTM-DEV-XXX'\n",[183,639,640],{"class":185,"line":318},[183,641,254],{"emptyLinePlaceholder":253},[183,643,644,646,648],{"class":185,"line":338},[183,645,278],{"class":227},[183,647,281],{"class":189},[183,649,284],{"class":227},[183,651,652],{"class":185,"line":344},[183,653,654],{"class":227},"    id: gtmId,\n",[183,656,657,659,661],{"class":185,"line":534},[183,658,305],{"class":227},[183,660,309],{"class":308},[183,662,486],{"class":227},[183,664,665,667,669,671,673],{"class":185,"line":540},[183,666,321],{"class":227},[183,668,324],{"class":308},[183,670,327],{"class":223},[183,672,330],{"class":193},[183,674,486],{"class":227},[183,676,677],{"class":185,"line":546},[183,678,341],{"class":227},[183,680,682],{"class":185,"line":681},15,[183,683,347],{"class":227},[10,685,687],{"id":686},"nuxt-3への移行","Nuxt 3への移行",[14,689,690,691,693],{},"Nuxt 3に移行する際は、",[17,692,114],{},"（Vue 3版）に切り替えるだけです。設定方法はほぼ同じなので、スムーズに移行できます。",[158,695,697],{"className":207,"code":696,"language":209,"meta":166,"style":166},"\u002F\u002F Nuxt 3の場合（参考）\n\u002F\u002F plugins\u002Fgtm.client.ts\nimport VueGtm from '@gtm-support\u002Fvue-gtm'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.use(VueGtm, {\n    id: 'GTM-XXXXXXX',\n    enabled: true,\n    debug: process.env.NODE_ENV !== 'production',\n  })\n})\n",[17,698,699,704,709,720,724,747,756,764,772,784,788],{"__ignoreMap":166},[183,700,701],{"class":185,"line":186},[183,702,703],{"class":216},"\u002F\u002F Nuxt 3の場合（参考）\n",[183,705,706],{"class":185,"line":220},[183,707,708],{"class":216},"\u002F\u002F plugins\u002Fgtm.client.ts\n",[183,710,711,713,715,717],{"class":185,"line":237},[183,712,224],{"class":223},[183,714,228],{"class":227},[183,716,231],{"class":223},[183,718,719],{"class":193}," '@gtm-support\u002Fvue-gtm'\n",[183,721,722],{"class":185,"line":250},[183,723,254],{"emptyLinePlaceholder":253},[183,725,726,728,730,733,736,740,743,745],{"class":185,"line":257},[183,727,260],{"class":223},[183,729,263],{"class":223},[183,731,732],{"class":189}," defineNuxtPlugin",[183,734,735],{"class":227},"((",[183,737,739],{"class":738},"s4XuR","nuxtApp",[183,741,742],{"class":227},") ",[183,744,269],{"class":223},[183,746,272],{"class":227},[183,748,749,752,754],{"class":185,"line":275},[183,750,751],{"class":227},"  nuxtApp.vueApp.",[183,753,281],{"class":189},[183,755,284],{"class":227},[183,757,758,760,762],{"class":185,"line":287},[183,759,290],{"class":227},[183,761,293],{"class":193},[183,763,486],{"class":227},[183,765,766,768,770],{"class":185,"line":302},[183,767,305],{"class":227},[183,769,309],{"class":308},[183,771,486],{"class":227},[183,773,774,776,778,780,782],{"class":185,"line":318},[183,775,321],{"class":227},[183,777,324],{"class":308},[183,779,327],{"class":223},[183,781,330],{"class":193},[183,783,486],{"class":227},[183,785,786],{"class":185,"line":338},[183,787,341],{"class":227},[183,789,790],{"class":185,"line":344},[183,791,792],{"class":227},"})\n",[10,794,795],{"id":795},"まとめ",[14,797,798,799,801,802,804],{},"廃止された",[17,800,19],{},"の代替として、",[17,803,91],{},"を使った実装方法を解説しました。",[14,806,807],{},"このライブラリを選択するメリットは次の通りです。",[107,809,810,816,822],{},[110,811,812,815],{},[146,813,814],{},"アクティブメンテナンス"," 継続的に更新されている",[110,817,818,821],{},[146,819,820],{},"移行容易性"," Nuxt 3への移行がスムーズ",[110,823,824,827],{},[146,825,826],{},"柔軟性"," カスタムイベントの送信が容易",[14,829,830],{},"GTMの詳細な設定は、GTM管理画面で行うことで、コードを変更せずにタグを管理できます。",[832,833,834],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":166,"searchDepth":220,"depth":220,"links":836},[837,838,842,843,849,850,851,852],{"id":12,"depth":220,"text":12},{"id":23,"depth":220,"text":23,"children":839},[840,841],{"id":27,"depth":237,"text":27},{"id":100,"depth":237,"text":100},{"id":124,"depth":220,"text":124},{"id":138,"depth":220,"text":138,"children":844},[845,846,847,848],{"id":141,"depth":237,"text":142},{"id":200,"depth":237,"text":201},{"id":358,"depth":237,"text":359},{"id":420,"depth":237,"text":421},{"id":427,"depth":220,"text":427},{"id":551,"depth":220,"text":551},{"id":686,"depth":220,"text":687},{"id":795,"depth":220,"text":795},"2023-02-04","廃止された@nuxtjs\u002Fgoogle-tag-managerの代替として、@gtm-support\u002Fvue2-gtmを使ったGTM導入方法を解説します。Nuxt 3への移行も見据えた実装例を紹介します。","md",{"tags":857},[858,859,860,861],"nuxtjs","gtm","ga4","analytics","\u002Fblog\u002Fnuxt2-google-tag-manager-setup",{"title":5,"description":854},"blog\u002Fnuxt2-google-tag-manager-setup","n1dCcxBp6pJ5pCI_Z1IT5GoPK2j9plF8W236jMF1N2g",1773664053948]