Skip to content

Commit

Permalink
infinite ads using gtm
Browse files Browse the repository at this point in the history
  • Loading branch information
@Risyandi
Risyandi committed Dec 27, 2018
1 parent 68c3799 commit b3b13a6
Show file tree
Hide file tree
Showing 7 changed files with 752 additions and 69 deletions.
239 changes: 239 additions & 0 deletions Creative Template/fixing_infinite_gtm.html
View file
@@ -0,0 +1,239 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
<!-- start content -->
<div class="baloon-ads" id="baloon-ads"></div>
<div class="baloon-ads" id="baloon-ads"></div>
<div class="popup-ads" id="popup-ads"></div>
<div class="popup-ads" id="popup-ads"></div>

<div class="dfp_leaderboard"></div>
<div class="dfp_leaderboard"></div>
<div class="dfp_leaderboard"></div>
<div class="dfp_leaderboard"></div>
<div class="dfp_rectangle"></div>
<div class="dfp_rectangle"></div>
<div class="dfp_rectangle"></div>
<div class="dfp_rectangle"></div>
<div class="dfp_parallax"></div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae necessitatibus, sequi deserunt, vel possimus optio culpa quia odit odio itaque at modi eum placeat pariatur! Facilis error cumque ad soluta. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis temporibus mollitia itaque cum, consequatur, accusamus sit libero nam vel illum quidem adipisci quas repellat eos natus quos esse? Cum, molestias!</div>

<div class="dfp_parallax"></div>

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae necessitatibus, sequi deserunt, vel possimus optio culpa quia odit odio itaque at modi eum placeat pariatur! Facilis error cumque ad soluta. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis temporibus mollitia itaque cum, consequatur, accusamus sit libero nam vel illum quidem adipisci quas repellat eos natus quos esse? Cum, molestias!</div>

<div class="dfp_parallax"></div>

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae necessitatibus, sequi deserunt, vel possimus optio culpa quia odit odio itaque at modi eum placeat pariatur! Facilis error cumque ad soluta. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis temporibus mollitia itaque cum, consequatur, accusamus sit libero nam vel illum quidem adipisci quas repellat eos natus quos esse? Cum, molestias!</div>

<!-- end content -->

<script type='text/javascript'>
// source external link of googletag
(function () {
var useSSL = 'https:' == document.location.protocol;
var src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
})();
</script>

<script type="text/javascript">
// define command googletag
window.googletag = window.googletag || {};
googletag.cmd = googletag.cmd || [];
console.log(window.googletag, ": debug window googletag", googletag.cmd, ": debug command googletag");

// adds elements
googletag.cmd.push(function () {
// define mapping
var Womantalk_Baloon_mapping = googletag.sizeMapping().
addSize([800, 600], [1, 1]).
addSize([600, 800], [1, 1]).
addSize([0, 0], [1, 1]).
build();
var Womantalk_Popup_Desktop_mapping = googletag.sizeMapping().
addSize([800, 600], [1, 1]).
addSize([0, 0], []).
build();
var Womantalk_Popup_Mobile_mapping = googletag.sizeMapping().
addSize([800, 600], []).
addSize([0, 0], [1, 1]).
build();

// define slot
googletag.defineSlot('/118200697/Womantalk/WT_Article_Baloon', [1, 1], 'Article_Baloon').defineSizeMapping(Womantalk_Baloon_mapping).addService(googletag.pubads());

googletag.defineOutOfPageSlot('/118200697/Womantalk/WT_Article_Popup_Desktop', 'WT_Popup_Desktop')
.defineSizeMapping(Womantalk_Popup_Desktop_mapping)
.addService(googletag.pubads());

googletag.defineOutOfPageSlot('/118200697/Womantalk/WT_Article_Popup_Mobile', 'WT_Popup_Mobile')
.defineSizeMapping(Womantalk_Popup_Mobile_mapping)
.addService(googletag.pubads());

// googletag service
googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs(true);

// disable initial load, we will use refresh() to fetch ads.
// calling this function means that display() calls just
// register the slot as ready, but do not fetch ads for it.
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});

// function to generate num id unique
var numSlotId = 1;
function generateIdSlot() {
var numId = numSlotId++;
return numId;
}

// function to load all elements ads
function loadAllElementsAds() {

// create element foreach meet class leaderboard
$('.dfp_leaderboard').each(function () {
if ($(this).html() <= 1) {

// define ads mapping
var Womantalk_Leaderboard_mapping = googletag.sizeMapping().
addSize([800, 600], [728, 90]).
addSize([0, 0], [[468, 60], [320, 50], [300, 100]]).
build();

var slotId = generateIdSlot();
console.log(slotId, "element leaderboard");

var appendTextLeaderboards =
"<div id='WT_Homepage_Leaderboard_" + slotId + "'>" +
"<\/div>";

// append element
$(this).append(appendTextLeaderboards);

var leaderboardSlot = googletag.defineSlot('/118200697/Womantalk/WT_Homepage_Leaderboard', [[300, 100], [320, 50], [468, 60], [728, 90]], 'WT_Homepage_Leaderboard_' + slotId + '').defineSizeMapping(Womantalk_Leaderboard_mapping).addService(googletag.pubads());

googletag.display('WT_Homepage_Leaderboard_' + slotId + '');
googletag.pubads().refresh([leaderboardSlot]);
}
});

// create element foreach meet class rectangle
$('.dfp_rectangle').each(function () {
if ($(this).html() <= 1) {

// define ads mapping
var Womantalk_Rectangle_mapping = googletag.sizeMapping().
addSize([800, 600], [300, 250]).
addSize([0, 0], [300, 250]).
build();

var slotId = generateIdSlot();
console.log(slotId, "element rectangle");

var appendTextRectangle =
"<div id='WT_Homepage_Rectangle1_" + slotId + "'>" +
"<\/div>";

// append element
$(this).append(appendTextRectangle);

var rectangleSlot = googletag.defineSlot('/118200697/Womantalk/WT_Homepage_Rectangle1', [[300, 250]], 'WT_Homepage_Rectangle1_' + slotId + '').defineSizeMapping(Womantalk_Rectangle_mapping).addService(googletag.pubads());

googletag.display('WT_Homepage_Rectangle1_' + slotId + '');
googletag.pubads().refresh([rectangleSlot]);
}
});

// create element foreach meet class parallax
$('.dfp_parallax:first').each(function () {
if ($(this).html() <= 1) {

// define ads mapping
var Womantalk_Parallax_Desktop_mapping = googletag.sizeMapping().
addSize([800, 600], [1, 1]).
addSize([0, 0], []).
build();

var Womantalk_Parallax_Mobile_mapping = googletag.sizeMapping().
addSize([800, 600], []).
addSize([0, 0], [1, 1]).
build();

var slotId = generateIdSlot();
console.log(slotId, "element parallax");

// append element for desktop
var appendTextParallaxDesk =
"<div id='WT_Parallax_Desktop_" + slotId + "' class='parallax-desktop' >" +
"<\/div>";

$(this).append(appendTextParallaxDesk);

var parallaxDeskSlot = googletag.defineOutOfPageSlot('/118200697/GVM_Staging/PELL_ADS', 'WT_Parallax_Desktop_' + slotId + '').defineSizeMapping(Womantalk_Parallax_Desktop_mapping).addService(googletag.pubads());

googletag.display('WT_Parallax_Desktop_' + slotId + '');
googletag.pubads().refresh([parallaxDeskSlot]);

// append element for mobile
var appendTextParallaxMob =
"<div id='WT_Parallax_Mobile_" + slotId + "' class='parallax-mobile' >" +
"<\/div>";

$(this).append(appendTextParallaxMob);

var parallaxMobSlot = googletag.defineOutOfPageSlot('/118200697/GVM_Staging/SEAMLESS', 'WT_Parallax_Mobile_' + slotId + '').defineSizeMapping(Womantalk_Parallax_Mobile_mapping).addService(googletag.pubads());

googletag.display('WT_Parallax_Mobile_' + slotId + '');
googletag.pubads().refresh([parallaxMobSlot]);
}
});
}
loadAllElementsAds()


// create element partial for (baloon and popup)
function loadElementPartial(){
var appendTextBaloon = '';
var appendElementPopupDesktop = '';
var appendElementPopupMobile = '';

appendElementPopupDesktop = "<div class=\"overlay-desktop\" id='WT_Popup_Desktop' style=\"width: 0px;height: 0px;display: none;\">"+
"<script type='text/javascript'>"+
"googletag.cmd.push(function() { googletag.display('WT_Popup_Desktop'); });"+
"<\/script>"+
"<\/div>";

appendElementPopupMobile = "<div class=\"overlay-mobile\" id='WT_Popup_Mobile' style=\"width: 0px;height: 0px;display: none;\">"+
"<script type='text/javascript'>"+
"googletag.cmd.push(function() { googletag.display('WT_Popup_Mobile'); });"+
"<\/script>"+
"<\/div>";

appendTextBaloon = "<div id='Article_Baloon' style=\"height: 1px; width: 1px;\">"+
"<script type='text/javascript'>"+
"googletag.cmd.push(function() { googletag.display('Article_Baloon'); });"+
"<\/script>"+
"<\/div>";

$(appendElementPopupDesktop).insertAfter('.popup-ads');
$(appendElementPopupMobile).insertAfter('.popup-ads');
$(appendTextBaloon).insertAfter('.baloon-ads');
}
loadElementPartial();
</script>

</body>

</html>

0 comments on commit b3b13a6

Please sign in to comment.