NUXT_FRONTEND/components/News/Amp.vue

<template>
  <div class="amp-page">
    <div class="amp-main">
      <h1 class="amp-title">{{ news.title }}</h1>
      <div class="amp-preview">{{ news.description }}</div>
      <div class="amp-image" v-if="news.image">
        <amp-img
          layout="fill"
          :alt="news.image ? news.image.title : ''"
          :src="news.image ? news.image.url : ''"
        ></amp-img>
      </div>

      <div class="amp-content" ref="content">
        <div v-html="ampContent"></div>
      </div>
    </div>

    <amp-iframe
      height="300"
      layout="fixed-height"
      sandbox="allow-scripts allow-same-origin allow-popups"
      frameborder="0"
      src="https://news.gnezdo.ru/amp_loader.html?tizerId=21507"
    ></amp-iframe>

    <amp-ad
      layout="fixed-height"
      height="250"
      type="luckyads"
      data-la-block="1ac9fe2c-26bd-406e-bf56-304a412aa85e"
      src="https://arhylm.com/6m17l1291vilp0my038qh867vqu768/kypag0x.php"
    ></amp-ad>
    <div class="amp-bottom">
      <nuxt-link :to="link" class="amp-link">Полная версия</nuxt-link>
    </div>
    <amp-analytics id="analytics1" type="googleanalytics">
      <script type="application/json" v-html="this.googleanalytics"></script>
    </amp-analytics>
    <amp-analytics type="metrika">
      <script type="application/json" v-html="this.metrika"></script>
    </amp-analytics>
    <amp-analytics config="https://top-fwz1.mail.ru/amp-analytics.config.json">
      <script type="application/json" v-html="this.mail"></script>
    </amp-analytics>
  </div>
</template>

<script>
export default {
  amp: "only",
  ampLayout: "amp",

  data() {
    return {
      googleanalytics: `
          {
              "vars": {
                "account": "UA-21345164-1"
              },
              "triggers": {
                "trackPageview": {
                  "on": "visible",
                  "request": "pageview"
                }
              }
          }
        `,
      metrika: `
        {
          "vars": {
            "counterId": "34950850"
          },
          "triggers": {
            "halfScroll": {
              "on": "scroll",
              "scrollSpec": {
                "verticalBoundaries": [50]
              },
              "request": "reachGoal",
              "vars": {
                "goalId": "halfScrollGoal"
              }
            },
            "defaultPageview": {
              "on": "visible",
              "request": "pageview"
            }
          }
        }
      `,
      mail: `
        {
          "vars": {
            "id": "55851"
          }
        }
      `,
    };
  },
  props: {
    news: {
      type: Object,
      required: true,
    },
  },
  computed: {
    link() {
      const { category, alias } = this.$route.params;
      return {
        name: "news-category-alias",
        params: { category, alias },
      };
    },
    ampContent() {
      return this.news.content
        .replace(/<iframe([^>]*)><\/iframe>/gi, (match, sub) => {
          return `<amp-iframe class="amp-content-iframe" ${sub} height="9" width="16" layout="responsive"></amp-iframe>`;
        })
        .replace(/<img([^>]*)>/gi, (match, sub) => {
          return `<amp-img class="amp-content-image" ${sub} height="150" width="300" layout="responsive"></amp-img>`;
        });
    },
  }
};
</script>

<style scoped>
</style>