NuxtJSのAMPモジュールでamp-analyticsを使う方法

NuxtJS + AMPモジュールでGoogle Analyticsのタグを貼る際、ちょっと手コヅったのでメモ。

GitHub - nuxt-community/amp-module: AMP Module for Nuxt

このページを参考に
AMP のグローバル サイトタグ  |  グローバル サイトタグ（gtag.js）  |  Google Developers

普通にAMPのページテンプレートにタグを貼ると下記のようにエスケープされてしまいます。

<amp-analytics type="gtag" data-credentials="include"><script type="application/json">
      {
        &quot;vars&quot;: {
          &quot;gtag_id&quot;: &quot;UA-*******-1&quot;,
          &quot;config&quot;: {
            &quot;UA-********-1&quot;: { &quot;groups&quot;: &quot;default&quot; }
          }
        }
      }
</script></amp-analytics>

そのため、JSON部分をcomputedなどに書いて、

  computed: {
    gaJson(): string {
      return `{
          "vars": {
            "gtag_id": "${GOOGLE_ANALYTICS_TRACKING_ID}",
            "config": {
              "${GOOGLE_ANALYTICS_TRACKING_ID}": { "groups": "default" }
            }
          }
        }`
    },

v-htmlを使って表示すればエスケープされずに出すことができます。

    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json" v-html="gaJson"></script>
    </amp-analytics>

AMPモジュールはページ内で使ったamp-系のタグに応じて必要なタグを自動で読み込んでくれるので便利です。

タグの動作確認はGoogle謹製のChrome拡張、Tag Assistantが便利です。

chrome.google.com

Vue.js入門 基礎から実践アプリケーション開発まで

Nuxt.jsとPythonで作る！ぬるさくAIアプリ開発入門　データ分析からAIアプリ開発まで優しく解説！ (技術の泉シリーズ（NextPublishing）)