Turbolinks 實例：Turbolinks 5 上使用 Google AdSense

Turbolinks 實例：Turbolinks 5 上使用 Google AdSense

紅寶鐵軌客

寫程式中、折磨中、享受中 ......

908 0

2019/04/19

3分鐘

☕

說實話，我也不確定這樣寫 google 到底接不是接受，畢竟，Adsense 是由 google 寫的，但是，至少，他解決了廣告一定要 reload 才會進來的問題，但是到底點擊後計數是否正確，只能說，用了幾個禮拜，現在看起來都對：

在 <head> 間，加入：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

實務上，你可能會要寫成一個 partial，在要放廣告的 view 中，用 <% content_for :head do %> 的方式加入，當然，你也可以加在 application.html.erb 中，只是當你到了沒有廣告的頁面，你會看到很多警告，告訴你這個載入後卻沒有被用到。

有很多 Rails 的 Turblolinks 上的討論，都會建議加上 data-turbolinks-eval="false"，但是，這其實是告訴 Turbolinks 在跳轉時，不要下載與執行這個 script，只有第一次下載與執行這個 script，所以加上了這個後，卻會發生 submit 後 ADs script 不動作的情況，把它取消後，就正常了，所以不要加上。

廣告部分：在 <body> 間，加入：

<ins class="adsbygoogle"
    style="display:block"
    data-ad-format="fluid"
    data-ad-layout-key="xxxxx"
    data-ad-client="xxxxx"
    data-ad-slot="xxxxx"</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

這是一個 native responsive 的廣告，你當然要把 key，client 跟 slot 換成你相關的設定，把它寫成一個 partial 會方便一些，就這樣，AdSense 就會動了，疑，好像跟沒改一樣，還沒完，這種用法要把 Turbolinks 的 preview 關掉！

關掉 Turbolinks preview 的方法

Turbolinks 預設是有 preview 的，好處當網頁有 cache 暫存時，就會先把 cache 的網頁先顯示出來，等到下載完後，再把 <body> 內容換掉，這樣做，使用者會感覺到好像網頁飛快，但是也有壞處，就是頁面內的 <script> 會執行兩次，AdSense 當然不喜歡，所以除了 reload 後的第一次，你只連結到任一頁有 AdSense 廣告的頁面，就會一直報錯。下面就是關掉的方法，把它放在 application.html.erb 的 <head> 中就好，到目前為止，我還滿喜歡把 Turbolinks preview 關掉的。

<meta name="turbolinks-cache-control" content="no-preview">

不要關掉 Turbolinks preview 的方法

如果你不想要把 Turbolinks 的 preview 關掉，或是，如果你不想要在 body 內呼叫 script，就可以改用下面的 javascript。

AdSenseTurbolinks.js:

$(document).on('turbolinks:load', function() {
  // 有 Adsense 廣告嗎?
  if ($('.adsbygoogle').length > 0) {
    AdsenseAds();
  };
});

function AdsenseAds() {
  var ads = document.querySelectorAll('.adsbygoogle');
  ads.forEach(function(ad) {
    (adsbygoogle = window.adsbygoogle || []).push({});
  });
}

用這個方法，你當然在廣告部分就不需要 <script> 那個部分了。

附註：

我是參考以下這篇的，網路找了半天，最後還是用老方法，目前動作正常，只是 AdSense 擺明的就不是 Idempotence，所以跟 turbolinks 是天生的八字不合，這樣做，你還是會看到 browers console 還是會有 adsense warning，adsense 會重複執行，你可以忽略它，或是，把 turbolinks 的 preview 關掉。

AdSense not working with Turbolinks — I keep getting Unsafe JavaScript attempt to access frame with URL http://lolfantasy.net/ from frame with URL http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-874208342468282…535&u_c...Stack Overflow

Turbolinks <script> 執行兩次的討論：

<script> elements in a page’s <body> will be evaluated twice. · Issue #167 · turbolinks/turbolinks — To reproduce this: add <script>console.log('hi')</script> at the end of a page , 2.reload the page, 'hi' will be printed once 3., go to another page and then go back, ... GitHub