I am using google-dfp's lazyLoading. When this is enabled, all Ads are lazy loaded. Is there a way to enable it only for specific ads and not for all?
googletag.pubads().enableLazyLoad({
// Fetch slots within 6 viewports.
fetchMarginPercent: 500,
// Render slots within 1.04 viewports.
renderMarginPercent: 4,
// Double the above values on mobile, where viewports are smaller
// and users tend to scroll faster.
mobileScaling: 10,
});
There is a way of doing it by splitting your adrequests in 2 batchs :
googletag.cmd.push(function() {
// Define ad slots.
var slots = [
googletag.defineSlot('/6355419/Travel/Europe', [728, 90], 'slot-1')
.addService(googletag.pubads()),
googletag.defineSlot('/6355419/Travel/Europe', [728, 90], 'slot-2')
.addService(googletag.pubads()),
googletag.defineSlot('/6355419/Travel/Europe', [300, 250], 'slot-3')
.addService(googletag.pubads()),
googletag.defineSlot('/6355419/Travel/Europe', [300, 250], 'slot-4')
.addService(googletag.pubads()),
googletag.defineSlot('/6355419/Travel/Europe', [300, 250], 'slot-5')
.addService(googletag.pubads())
];
// Disable initial load to precisely control when ads are requested.
googletag.pubads().disableInitialLoad();
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
// Issue first SRA request (slots 1 and 2) immediately.
googletag.pubads().refresh([slots[0], slots[1]]);
// Enable lazyLoading after 1st SRA batch
googletag.pubads().enableLazyLoad({
// Fetch slots within 6 viewports.
fetchMarginPercent: 500,
// Render slots within 1.04 viewports.
renderMarginPercent: 4,
// Double the above values on mobile, where viewports are smaller
// and users tend to scroll faster.
mobileScaling: 10,
});
// Issue second SRA request (slots 3, 4 and 5) once lazyLoading has been enabled
googletag.pubads().refresh([slots[2], slots[3], slots[4]]);
});
See here for details about SRA batching.
Related
I have a page with a banner advert that will shrink/grow depending on screen size or if it's desktop or mobile.
The banner will be displayed with in one div.
The adverts are in three different advert ID's that each have their own size:
Example:
ad-1 is 1220x350
ad-2 is 650x190
ad-3 is 300x250
How do I make the correct advert display in a div depending on the div size?
You could use sizeMapping to dispatch your sizes based on the viewport size.
First : define the sizeMapping
var mapping = googletag.sizeMapping()
.addSize([1024, 768], [1220, 350])
.addSize([980, 690], [650, 190])
.addSize([0, 0], [300, 250])
.build();
Usage : addSize([screenWidth, screenHeight], [width,height])
Second : add the mapping to your slot definition
var slot = googletag.defineSlot('/adUnitPath/', [[1220, 350], [650, 190], [300, 250]], 'yourTargetId')
.defineSizeMapping(mapping)
.addService(googletag.pubads());
Full documentation here and here
I have a custom 1600x433 banner, I've created it as responsive and I'm trying to use sizeMapping, on the desktop the banner works, however, on the tablet and mobile the banner area just goes blank.
Set custom sizes in settings> sizes. The original image has exactly. 1600x433 What am I doing wrong that the banner is not responsive as I customize it?
googletag.cmd.push(function() {
var mapping = googletag.sizeMapping().
// Accepts both common mobile banner formats
addSize([320, 400], [320, 50]).
// Same width as mapping above, more available height
addSize([320, 700], [360, 100]).
// Desktop
addSize([1050, 200], [1600, 433]).build();
googletag.defineSlot('/id/sitenovo',[320, 50], 'div-gpt-ad-0').defineSizeMapping(mapping).addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
Size [320, 400] matches a viewport greater than or equal to 320, 400 pixels. Use a size [0,0
The legend labels for my pie chart are being cut off when the label is too long. I have already tried to setting width to '100%' but my legend is way big to counter that. Is there a way to discretely define the pie chart size and the legend size? Could someone please share a working example of the same.
Link for JS Fiddle: https://jsfiddle.net/2nzzLe18
The container div dimensions and the legend label font size are part of my requirement.
Also below is the code,
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['info regarding task Work', 11],
['info regarding task Eat', 2],
['info regarding task Commute', 2],
['info regarding task Watch TV', 2],
['info regarding task Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
chartArea: {left: -100, width: '100%'},
legend: {textStyle: {fontSize: 15}},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
Thanks,
Farhan
it can be cumbersome to properly size a pie chart,
but it boils down to adjusting the size of the overall chart div,
and the size of the chartArea, where the pie is drawn (separate from the legend)
it can be tricky because it doesn't always respond how you think it should,
but I was able to get the entire legend to display
see the following working snippet,
moved the overall size from the style attribute on the div
to the options for the chart, then adjusted the chartArea
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['info regarding task Work', 11],
['info regarding task Eat', 2],
['info regarding task Commute', 2],
['info regarding task Watch TV', 2],
['info regarding task Sleep', 7]
]);
var options = {
backgroundColor: 'cyan',
title: 'My Daily Activities',
chartArea: {
left: 0,
height: 250,
width: 600
},
height: 300,
width: 600,
legend: {
maxLines: 1,
textStyle: {
fontSize: 15
}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>
I am using Google DFP adverts and I want to change the position they are in when the site is viewed on mobile.
I have tried duplicating the advert and showing one/ hiding the other but that still shows both adverts.
Is there any way to accomplish this, please see attached image for an example of what I am after.
Well, this is kind of hard, but not impossible. I will give you even more complicated example, where not only the banner could be in different places, but could be with different sizes depending on the device.
Scenario: You have an Ad Unit called adunit1. You want to show in the content on desktop, but on top on mobile. On desktop you want to be 300x250, and on mobile you want to 320x100 or 320x50. We consider desktop everything with viewport width of 970px and mobile anything smaller (could add more cases, but let's not make it too complicated).
Step 1: Go to the Ad Unit options in DFP and add all sizes that this ad unit will display (in our scenario: 300x250, 320x100, 320x50).
Step 2: Create size mappings variable for each sub-scenario. As bellow:
var adunit1desktop = googletag.sizeMapping().addSize([970, 0], [300, 250]).addSize([0, 0], []).build();
Which means: If viewport width is more than 970 AND viewport height is more than 0, serve banner with size 300x250. If smaller, serve nothing.
Now let us make the same for the mobile version with different name of the variable:
var adunit1mobile = googletag.sizeMapping().addSize([970, 0],[]).addSize([0, 0], [[320,100],[320,50]]).build();
Which means: If viewport width is more than 970 AND viewport height is more than 0, serve nothing. If smaller serve either 320x100 OR 320x50.
We will now define the Ad Units, but will make this twice as will assign different size mapping for desktop and mobile.
For desktop:
gptAdSlots[0] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-desktop').defineSizeMapping(adunit1desktop).addService(googletag.pubads());
Two details to watch here: div-banner-desktop - this is the div id where we want to show the desktop banner. defineSizeMapping(adunit1desktop) - this is how we tell DFP to show this based on the size rules above (in brief: show the desktop banner, only if viewport width is at least 970px).
Now for the mobile:
gptAdSlots[1] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-mobile').defineSizeMapping(adunit1mobile).addService(googletag.pubads());
Pay attention to three details: div-banner-mobile, defineSizeMapping(adunit1mobile) and gptAdSlots[1] - we increased with 1 for the next slot rendering. If there are more, each should be increased by 1 as well.
Now go to your web site and put the following code where you want to display the desktop banner:
<div id="div-banner-desktop">
<script>
googletag.cmd.push(function() { googletag.display('div-banner-desktop'); });
</script>
</div>
Now place this code where you want to display the mobile banner:
<div id="div-banner-desktop">
<script>
googletag.cmd.push(function() { googletag.display('div-banner-desktop'); });
</script>
</div>
The whole code block should look something like this
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
var gptAdSlots = [];
googletag.cmd.push(function() {
var adunit1desktop = googletag.sizeMapping().addSize([970, 0], [300, 250]).addSize([0, 0], []).build();
var adunit1mobile = googletag.sizeMapping().addSize([970, 0],[]).addSize([0, 0], [[320,100],[320,50]]).build();
gptAdSlots[0] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-desktop').defineSizeMapping(adunit1desktop).addService(googletag.pubads());
gptAdSlots[1] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-mobile').defineSizeMapping(adunit1mobile).addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
});
</script>
I have to put image loading at client side, which is basically right after browser finishes requesting a page, an ajax call is triggered to load list of images, then slides are added into sider container. Number of photos is not known after that ajax call.
I tried building html text of slides, and assign into slider container, then trigger the slider-starter. But the slider doesn't show properly.
Thanks a lot for any suggestion
I post what I did here in case it's helpful for someone:
//function to start the slider
jssor_slider1_starter = function (containerId) {
var options = {
$AutoPlay: false,
$SlideDuration: 800,
$FillMode: 2,
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$ChanceToShow: 2,
$Lanes: 1,
$SpacingX: 14,
$SpacingY: 12,
$Cols: 6,
$Align: 156,
$Orientation: 2
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
//Ajax function to start the slider after loading the 'content' of slider
//getImgUrl is the url of page returning urls of images contained in slider. Format of response can be whatever as long as you can parse it, my sample is [[[url1,url2..]]]
$.ajax({
url:getImgUrl,
success:function(data){
var imgurls_str=data.substring(data.indexOf('[[[')+3,data.indexOf(']]]'));
var imgurls=imgurls_str.split(',');
var imgHtmls='';
for(var i=0;i<imgurls.length;++i){
imgHtmls+='<div><img u="image" src="'+imgurls[i]+'" /><img u="thumb" src="'+imgurls[i]+'" /></div>';
}
$("#slides").html(imgHtmls);
jssor_slider1_starter('slider1_container');
}
});
You are doing in a right way.
All you need is to check slides (you added dynamically) are correct or not.
To check html created dynamically, you can copy it out and test it in a standalone html file to see if the slider works.