Turbolinks 實例:Turbolinks 5 上使用 Google AdSense
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.
Article info
This article is part of:
分類於:
日期:
創作於:2019/04/19,最後更新於:2019/04/20。
合計:774字
Like
or Dislike
About the Author
很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
就,這會一點點,那會一點點⋯⋯
More to explore
說實話,我也不確定這樣寫 google 到底接不是接受,畢竟,Adsense 是由 google 寫的,但是,至少,他解決了廣告一定要 reload 才會進來的問題,但是到底點擊後計數是否正確,只能說,用了幾個禮拜,現在看起來都對:
在 <head> 間,加入:
實務上,你可能會要寫成一個 partial,在要放廣告的 view 中,用 <% content_for :head do %> 的方式加入,當然,你也可以加在 application.html.erb 中,只是當你到了沒有廣告的頁面,你會看到很多警告,告訴你這個載入後卻沒有被用到。
有很多 Rails 的 Turblolinks 上的討論,都會建議加上 data-turbolinks-eval="false",但是,這其實是告訴 Turbolinks 在跳轉時,不要下載與執行這個 script,只有第一次下載與執行這個 script,所以加上了這個後,卻會發生 submit 後 ADs script 不動作的情況,把它取消後,就正常了,所以不要加上。
廣告部分:在 <body> 間,加入:
這是一個 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 關掉的。
不要關掉 Turbolinks preview 的方法
如果你不想要把 Turbolinks 的 preview 關掉,或是,如果你不想要在 body 內呼叫 script,就可以改用下面的 javascript。
AdSenseTurbolinks.js:
用這個方法,你當然在廣告部分就不需要 <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