discourse/discourse-adplugin
1
0
Fork 0
mirror of https://github.com/discourse/discourse-adplugin.git synced 2025-03-09 13:19:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

FIX: DFP ad units being refreshed multiple times on the same render

Browse Source 
Ember is firing events multiple times when the ad component is shown.

Only solution I can find is to add a delay between calls to refresh
the ad unit. I chose 3 seconds.
This commit is contained in:
Neil Lalonde 2019-06-26 11:15:04 -04:00
parent 89200f3b99
commit 2ba276b0fb
1 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
assets/javascripts/discourse/components/google-dfp-ad.js.es6
View File

@ -213,6 +213,7 @@ export default AdComponent.extend({
classNames: ["google-dfp-ad"], classNames: ["google-dfp-ad"],
loadedGoogletag: false, loadedGoogletag: false,
refreshOnChange: null, refreshOnChange: null,
lastAdRefresh: null,
@computed( @computed(
"siteSettings.dfp_publisher_id", "siteSettings.dfp_publisher_id",
@ -291,9 +292,20 @@ export default AdComponent.extend({
return this.isNthPost(parseInt(this.siteSettings.dfp_nth_post_code)); return this.isNthPost(parseInt(this.siteSettings.dfp_nth_post_code));
}, },
// 3 second delay between calls to refresh ads in a component.
// Ember often calls updated() more than once, and *sometimes*
// updated() is called after _initGoogleDFP().
shouldRefreshAd() {
const lastAdRefresh = this.get("lastAdRefresh");
if (!lastAdRefresh) {
return true;
}
return new Date() - lastAdRefresh > 3000;
},
@on("didUpdate") @on("didUpdate")
updated() { updated() {
if (this.get("listLoading")) { if (this.get("listLoading") || !this.shouldRefreshAd()) {
return; return;
} }
@ -306,7 +318,9 @@ export default AdComponent.extend({
categorySlug = this.get("currentCategorySlug"); categorySlug = this.get("currentCategorySlug");
if (this.get("loadedGoogletag")) { if (this.get("loadedGoogletag")) {
window.googletag.cmd.push(function() { // console.log(`refresh(${this.get("divId")}) from updated()`);
this.set("lastAdRefresh", new Date());
window.googletag.cmd.push(() => {
ad.setTargeting("discourse-category", categorySlug || "0"); ad.setTargeting("discourse-category", categorySlug || "0");
window.googletag.pubads().refresh([ad]); window.googletag.pubads().refresh([ad]);
}); });
@ -319,21 +333,22 @@ export default AdComponent.extend({
return; return;
} }
let self = this; loadGoogle(this.siteSettings).then(() => {
loadGoogle(this.siteSettings).then(function() { this.set("loadedGoogletag", true);
self.set("loadedGoogletag", true); this.set("lastAdRefresh", new Date());
window.googletag.cmd.push(function() { window.googletag.cmd.push(() => {
let slot = defineSlot( let slot = defineSlot(
self.get("divId"), this.get("divId"),
self.get("placement"), this.get("placement"),
self.siteSettings, this.siteSettings,
self.site.mobileView, this.site.mobileView,
self.get("currentCategorySlug") || "0" this.get("currentCategorySlug") || "0"
); );
if (slot && slot.ad) { if (slot && slot.ad) {
// Display has to be called before refresh // Display has to be called before refresh
// and after the slot div is in the page. // and after the slot div is in the page.
window.googletag.display(self.get("divId")); window.googletag.display(this.get("divId"));
// console.log(`refresh(${this.get("divId")}) from _initGoogleDFP()`);
window.googletag.pubads().refresh([slot.ad]); window.googletag.pubads().refresh([slot.ad]);
} }
}); });