手動在.vue檔裡增加AdSense廣告單元(以VuePress為例)

前言

Google AdSense的廣告單元建立後，會提示將程式碼貼到body裡面
提供的是script tag
程式碼樣子如下

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-<YOUR_CLIENT_ID>"
     crossorigin="anonymous"></script>
<!-- ad_banner_bottom -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-<YOUR_CLIENT_ID>"
     data-ad-slot="<YOUR_SLOT_ID>"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

若是單純的Vue.Js專案，要自己控制index.html還算容易
但若使用基於Vue.Js而做成的更高階框架(如VuePress)，要要去調整index.html就沒那麼方便了
甚至可能還得去動到他原始碼，或是看他的config是否有提供注入的方式

很遺憾VuePress在config.js沒有提供注入的方式
雖有人提issue了，看起來尚未實作
目前官方是列在enhancement

想要加廣告，只好自己來了！

由於我在VuePress主要是為了自製頁面與部份靜態資料，且有將主題存在local使用
(可參考VuePress 自製獨立頁面，並融入Ant-design UI套件)
故直接侵入式修改主題以嵌入廣告

作法

打開要調整的vue檔
因預計在文章最後嵌入廣告，以VuePress-theme-reco為例，則是page.vue

在mounted()裡透過js createElement()來補上script tag就好！

直接上Code

// add by typeart.cc for AdSense
mounted() {
  const externalScript = document.createElement('script');
  externalScript.type = 'text/javascript';
  externalScript.setAttribute('async','async');
  externalScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-<YOUR_CLIENT_ID>';
  externalScript.crossOrigin = 'anonymous';
  document.getElementsByTagName('body')[0].appendChild(externalScript);

  const ins = document.createElement('ins');
  ins.setAttribute('class','adsbygoogle');
  ins.setAttribute('style','display:block;');/*add other styles if required*/
  ins.setAttribute('data-ad-client','ca-pub-<YOUR_CLIENT_ID>');
  ins.setAttribute('data-ad-slot','<YOUR_SLOT_ID>');
  ins.setAttribute('data-ad-format','auto');
  ins.setAttribute('data-full-width-responsive','true');
  document.getElementsByTagName('body')[0].appendChild(ins);

  const inlineScript = document.createElement('script');
  inlineScript.type = 'text/javascript';
  inlineScript.text = '(adsbygoogle = window.adsbygoogle || []).push({});'
  document.getElementsByTagName('body')[0].appendChild(inlineScript);
},
// add by typeart.cc for AdSense

建議加上註解包住自己修改的範圍
以利未來版更主題時，可以迅速定位到自己修改的部份

因Vue.Js 的生命週期裡，會先執行mounted()
在產生body內容前，優先注入script tag之後，再產生出其他內容
故此步注入的AdSense單元廣告，會被排在後面
自然而然就是「文章末段」才出現廣告了！

參考資料

stack overflow / Dynamic Adsense Insertion With JavaScript