I'm successfully adding AdSense into my Vue app. What I want is to re-load the ads on every 30 seconds. I tried to use setInterval to this.adsense = false and then back to true, but it says, that the ins already have ads in it.
<div v-if="ads" class="ads"><ins v-if="adsense" class="adsbygoogle" style="display: inline-block; width: 320px; height: 50px;" data-ad-client="ca-pub-XXX" data-ad-slot="XXX"></ins></div>
mounted: async function () {
let adsense = document.createElement('script')
adsense.setAttribute('data-ad-client', 'ca-pub-XXX')
adsense.setAttribute('async', '')
adsense.setAttribute('src', 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
document.head.appendChild(adsense)
this.ads = true
this.adsense = true
;
(window.adsbygoogle = window.adsbygoogle || []).push({})
}
The answer here is simply don't do it. It is against the terms of Adsense to auto-refresh ads (without the users causing it).
Auto-refreshing ads
Publishers are not permitted to refresh a page or an element of a page
without the user requesting a refresh. This includes placing ads on
pages or in placements that auto-redirect or auto-refresh.
Additionally, publishers may not display the ads for a preset time
(i.e., pre-roll) before users can view content such as videos, games,
or downloads.
https://support.google.com/adsense/answer/1346295?hl=en
Once you get banned from adsense it is near impossible to undo. I recommend you read carefully through all of their terms.
Related
I'm using Facebook Pixel for tracking on my website.
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'xxxxxxxxxxxxx');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=320956065128864&ev=PageView&noscript=1"
/></noscript>
Any solution to stop or filter like GA filter excludes domain or IP? Thanks.
Code snipet for adding FB pixel is first checking if FB pixel is already added, by checking for variable fbq:
if(f.fbq)return;
So the simplest way to skip FB pixel script from initial injection is to define fbq variable before FB snipet.
<script>
const list = ['localhost'];
if (list.includes(window.location.hostname)) {
window.fbq = function() {};
}
// ...original Facebook Pixel code here
</script>
Add any domain to the list array in order to block FB pixel execution.
In Traffic permissions, you can allow only the production domain, which will automatically block localhost.
Details here:
https://www.facebook.com/business/help/278125336598935?id=1205376682832142
EDIT: reason for this request. This edit has been added when the solution has been found for the sake of describing my needs. I had a Carousel that showed a logical sequence step 1, step 2, step 3.. That carousel is not a top of page, so I want it to stay stopped / paused until the user sees it and when it will see it, as first, I want the user to see the first slide, step 1. Nevertheless, some users (and they are not few, believe me) don't know about carousels and sliders, so I don't wanna miss their view on the subsequent slides. This is the reason for what follow.
I'm wondering about this
I have a bootstrap 3.1 carousel that is not at top of the home page.
Instead you "reach it" when scrolling down some "bootstrap' rows".
Well I'd like it to keep the carousel stopped / paused until the user will scroll the page down to where the carousel is placed (let's say the carousel height is 500 pixel, when at least the first top 150 pixels are entered in the viewable area)
when those 150 pixel have been scrolled in, the pause / stop should turn to "play" and so, if the pause between each slide is 5000 msec, after 5000 msec the next slide should turn.
According with this solution it is matter of javascript but it is not what I'm seeking for also excuse me but currently I'm not so strong with javascript and jquery, so thank you for any hint with some explanation.
EDIT 01
This script looks to be the correct and also a great solution :-), especially reading the comments at bottom of that page, but as stated above, I miss the knowledge to properly take advantage of it, thank you for any hint.
Here's a method using Intersection Observer API; it will fail silently for IE and other unsupported browsers.
setTimeout(function() {
if (IntersectionObserver === undefined) return;
const carousels = $(".carousel");
if (carousels.length === 0) return;
const RATIO = 0;
// You can set a intersection percentage, such as 0.25 for 25% visible, but
// if you want pixels, I'm using `rootMargin` in the options below
var observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(function(entry) {
jQuery(entry.target).carousel(entry.intersectionRatio < RATIO ? 'pause' : 'cycle');
});
}, {
root: null,
rootMargin: '-150px 0px', // 150px visible on top or bottom of viewport
threshold: RATIO
});
carousels.each(function () {
observer.observe(this);
});
}
});
I went for the long path, self answered myself.
I've tried several plugins, but they were not effective or either they were breaking the Carousel engine.
Researching so much, finally I've landed on this jQuery plugin
http://www.jqueryscript.net/other/jQuery-Plugin-To-Determine-If-An-Element-Is-In-the-Viewport-Viewport-Checker.html
It works pretty fine, straight and as expected and there is a bonus included: the offset I was seeking for!!! (yeeeh!)
Pretty easy to implement
<script src="viewportchecker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel('pause'); /** load page with carousel paused
$('.carousel').viewportChecker({
offset: 200, /** wait for the first 200 pixel of the element
to enter in the viewport
callbackFunction: function(elem){
setTimeout(function(){
$('.carousel').carousel(''); /** remove pause
},500);
}
});
});
</script>
"thank you" to myself :-)
I suppose this would also help the problem when the viewport cuts the carousel in half. ie: With a carousel at the top of the page and you scroll down, forcing the top of browser window to show only the bottom half of carousel.
Currently, when the carousel cycles, the carousel images load to the top of the viewport, not the top of the carousel container.
When you scroll back up, the carousel only displays half the image and the top half is grey. This is very annoying. Will try this to see if it fixes.
I'm working on a Windows 8 Metro app and I've found (even on their sample applications where I haven't touched the code) that as you navigate between pages, the top level "default.html" acquires every single js and css file ever loaded during the application's run.
This is causing me a lot of headaches as my css is colliding between difference pages. Am I missing something or is this is serious bug?
Not unloading JavaScript and CSS was a deliberate choice, not an accident or oversight.
First off, understand that page controls are purely a JavaScript construction - the browser engine has absolutely no knowledge of them. The browser just sees a chunk of DOM that was dynamically generated by scripts.
The web platform doesn't let you unload script files - once they're loaded into the context, they're there forever.
With CSS, they could have tried removing tags, but it opens up a can of worms. Depending on which order pages are navigated to, you could end up with different styles applied in the same app. What if two pages refer to the same style sheet? Do you add the same link tag twice? And which one do you remove?
It's a mess. Instead, WinJS guarantees that scripts and stylesheets will be loaded once and only once, the first time they're referenced. So you can have every page in your app reference "myStyles.css" and it'll only be loaded once (and there will only be one style tag).
So what do you do to prevent the issues you're seeing? First off, remember you're building an app, not a web site that will arbitrarily grow new content. Decide on your general styles and classes. Put shared styling in your default.css and reference it from your default.html file.
For individual pages, the easiest thing to do is prefix your styles with the page name. Instead of:
<div class='intro'></div>
do
<div class='page1-intro'></div>
Then you're guaranteed to avoid collisions.
If you're referencing page elements by ID, well don't do that. Using ID's in pages causes all sorts of potential weirdness (what if you render the same page control twice at the same time? Also, the ID doesn't exist until after the page has been loaded into the DOM, which means data-win-options references by ID don't work). But if you insist, again, consider prefixing the ids with the page.
Basically, set up ad-hoc namespaces to keep you from colliding. It's a lot easier than ripping out link tags manually and will result in a lot better app experience than doing full navigations.
Its not a bug, it is part of the default app pattern used by the WinJS tempaltes. The default WinJS templates use a single-page model, meaning that all content is loaded into the default.html using a PageNavigatorControl. As a result, there is a single DOM in memory at all time. If you followed a similar pattern in a regular browser, you would see the same behavior.
You can, if you want, use more traditional navigation using multiple pages and traditional href links. That is not the recommended approach, but if you are trying to bring existing web assets built using that model, it can make things easier.
You can resolve this problem by querying the document for the link elements that import your styles and disabling the ones you don't want. You need to make sure that you don't disable the MS CSS files and the default.css file in your project, assuming you use it to define the common styles for your app.
Here is a sample that shows you how to do it. This is a file called page2.html which, when loaded by the WinJS.Pages.UI.render method will locate and disable the link elements it doesn't want. It makes sure that the page2.css file is enabled and keeps a list of the files it simply ignores.
(I put this in the ready handler function, but I tend to use this technique in the handler for the WinJS.Navigation events and rely on consistent file naming to get the result I want).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>UnloadCSS</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- UnloadCSS references -->
<link href="/css/page2.css" rel="stylesheet" />
<script>
WinJS.UI.Pages.define("/page2.html", {
ready: function () {
var ignoreList = ["/css/ui-dark.css", "/css/ui-light.css", "/css/default.css"];
var myCSS = "/css/page2.css";
WinJS.Utilities.query("link").forEach(function (linkElem) {
if (linkElem.href.indexOf(myCSS) > -1) {
linkElem.disabled = false;
} else {
var ignore = false;
ignoreList.forEach(function (ignoreItem) {
if (linkElem.href.indexOf(ignoreItem) > -1) {
ignore = true;
}
});
if (!ignore) {
linkElem.disabled = true;
}
}
});
}
});
</script>
</head>
<body>
<button>Change </button>
</body>
</html>
this could be a good solution with a convention names aproach :
var currentPage = Application.navigator.pageControl.uri.replace("ms-appx://" + Windows.ApplicationModel.Package.current.id.name.toLowerCase(), "");
var currentCss = currentPage.replace(".html", ".css");
var ignoreList = ["/css/ui-dark.css", "/css/ui-light.css", "/css/default.css"];
WinJS.Utilities.query("link").forEach(function (linkElem) {
if (linkElem.href.toLowerCase().indexOf(currentCss) > -1) {
linkElem.disabled = false;
} else {
var ignore = false;
ignoreList.forEach(function (ignoreItem) {
if (linkElem.href.toLowerCase().indexOf(ignoreItem.toLowerCase()) > -1) {
ignore = true;
}});
if (!ignore) {
linkElem.disabled = true;
}
}
});
I have a gadget that is a glossary with a number of different pages. users can upload new words to the data source and those words will be pulled into the glossary through an AJAX call.
I want to resize the gadget window everytime the window is re-sized OR a new letter is selected and the page height changes (ie the gadget html block height).
Google developers has posted this on their website. However, this clearly is not working for me. The scrolling is not registering on the iframe and the height is not adjusting when the window is resized.
Here are my ModulePrefs
title="Climate Policy and Science Glossary"
description="Paragraph format"
height="300"
scrolling="true">
<Require feature="dynamic-height"/>
<Require feature="opensocial-0.8" />
Here is the gadget's script telling it to adjust:
window.onresize = adjust;
function adjust() {
var wndwH = gadgets.window.getViewportDimensions().height,
wgtH = $('#_glossary').closest('html').height,
h = Math.min(wndwH, wgtH);
gadgets.window.adjustHeight(h);
}
gadgets.util.registerOnLoadHandler(adjust);
What's going on? Am I doing something wrong or is there anyone else out there having trouble with Google's dynamic height??
The adjust function really only needs:
function adjust() {
gadgets.window.adjustHeight();
}
That should fit everything automatically.
Would like to know if it's possible (and how) using the YouTube iframe API to have an html button or link, external to the player, to toggle the sound on and off.
Thanks,
Mauro
see jQuery Youtube Plugin for complete specs and download.
It will be possible to declare a player like this:
jQuery("#youtube-player-container").tubeplayer({
width: 600, // the width of the player
height: 450, // the height of the player
allowFullScreen: "true", // true by default, allow user to go full screen
initialVideo: "DkoeNLuMbcI", // the video that is loaded into the player
preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
onPlay: function(id){}, // after the play method is called
onPause: function(){}, // after the pause method is called
onStop: function(){}, // after the player is stopped
onSeek: function(time){}, // after the video has been seeked to a defined point
onMute: function(){}, // after the player is muted
onUnMute: function(){} // after the player is unmuted
});
Then just add a link with the desired function:
<a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("mute")'>
Mute player