如何将 Google Ad Manager 添加到 Nuxt.js ？

第一，将 Google Ad Manager 脚本添加到 head 标籤，加载GPT脚本：

<!-- app.html --><script  async="async"  src="https://www.googletagservices.com/tag/js/gpt.js"></script><script type="text/javascript">  window.googletag = window.googletag || {};  window.googletag.cmd = window.googletag.cmd || [];</script>

第二，创建 Google Ad Manager 组件以在您想要的任何地方重複使用
PS 确保切换页面 广告可以每次更新

<!-- components/Gpt.vue --><template>  <div :id="id"></div></template>

Script：

<!-- components/Gpt.vue -->export default {    name: 'Gpt',    props: {      size: Array,      path: String,      id: String,    },    beforeCreate() {      window.googletag.cmd.push(() => {        window.googletag.destroySlots();      });    },    mounted() {      const { path, size, id } = this;      window.googletag.cmd.push(() => {        window.googletag          .defineSlot(path, size, id)          .addService(window.googletag.pubads());        window.googletag.pubads().enableSingleRequest();        window.googletag.enableServices();        window.googletag.display(id);      });    },  };

Props:

size: Array => 添加广告版位的尺寸
path: String => 加入广告的连结
id: String => 插入 Google Ad Manager 给的GoogleAdId

第三，将组件添加到需要显示的页面中

<!-- page/index.vue --><Gpt  path="/21737763597/adunit-1"  :size="[[300, 600], [300, 250], [336, 280]]"  id="div-gpt-ad-yourGoogleAdId"/>

Script：

<!-- page/index.vue -->import Gpt from "~/components/Gpt";export default {  name: "App",  components: {    Gpt  }};