Turbolinks 實例：Turbolinks 5 上使用 Google AdSense

Turbolinks 實例：Turbolinks 5 上使用 Google AdSense

紅寶鐵軌客

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

909 0

2019/04/19

3 mins read

☕

說實話，我也不確定這樣寫 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

WriterShelf™ is a unique multiple pen name blogging and forum platform. Protect relationships and your privacy. Take your writing in new directions. ** Join WriterShelf**

WriterShelf™ is an open writing platform. The views, information and opinions in this article are those of the author.

Rails 如何使用 cookies

Turbolinks 實例：最後一根稻草，我終於跟 Turbolinks 說再見了

Article info

This article is part of:

Rails 實作

Categories:

科技

⟩

程式開發

⟩

Ruby & Rails

Date:

Published: 2019/04/19 - Updated: 2019/04/20

Total: 774 words

About the Author

很久以前就是個「寫程式的」，其實，什麼程式都不熟⋯⋯
就，這會一點點，那會一點點⋯⋯

More to explore

Numerology Reimagined: The AI Approach to Ancie...

For centuries, numerology has been a path through which individuals sought understanding and guidance. This mystical art, deeply entrenched in various cultural traditions, interprets the universe through numbers. Fast forward to the modern era...

7ibk7w82g0iixng8yx8jalw ytjqqprsuxsqsmlkqnmq14vsekuhhlp6wm krx65jofoljhpk1uc9j21w7x yknco vdwsnkvrgbjx9o amlbzxgq9th6egk8p g7yv2bnwrvtcisu 8mcqxuuj g

Good Reasons to Buy Comics

There are plenty of reading materials available everywhere, both offline and online, but the enjoyment that comes from reading comic books is different. Not only is the storyline accompanied by incredible drawings, but you also have a tangible pro...