Turbolinks 實例:Turbolinks 5 上使用 Google AdSense

紅寶鐵軌客
來關注...
關注/停止關注:紅寶鐵軌客
關注有什麼好處?:當作者有新文章發佈時,「思書」就會自動通知您,讓您更容易與作者互動。
現在就加入《思書》,你就可以關注本作者了!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,讓你寫作不再受限,討論更深入真實,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入
寫程式中、折磨中、享受中 ......
761   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


喜歡作者的文章嗎?馬上按「關注」,當作者發佈新文章時,思書™就會 email 通知您。

思書是公開的寫作平台,創新的多筆名寫作方式,能用不同的筆名探索不同的寫作內容,無限寫作創意,如果您喜歡寫作分享,一定要來試試! 《 加入思書》

思書™是自由寫作平台,本文為作者之個人意見。


文章資訊

本文摘自:
分類於:
日期:
創作於:2019/04/19,最後更新於:2019/04/20。
合計:774字


分享這篇文章:
關於作者

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




參與討論!
現在就加入《思書》,馬上參與討論!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,用筆名來區隔你討論內容,讓你的討論更深入,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入


看看作者的其他文章


看看思書的其他文章



×
登入
申請帳號

需要幫助
關於思書

暗黑模式?
字體大小
成人內容未過濾
更改語言版本?