###Introdução
O processo de chamada do overlay é o seguinte:
- Existe a
<div>do ad no template do html - Javascript faz a request para o dfp
- DFP dispara um trigger que o Javascript do site que está esperando, enviando todas as informações necessárias para exibirmos o ad.
- Assim que chamado, o Javascript renderiza o o conteúdo vindo de parâmetro e exibe o overlay
#Exemplo
###HTML
A <div/> fica dentro do template do html
<!DOCTYPE html>
<html>
<body>
<div id="home_interstitial"></div>
</body>
</html>###Chamada do Javascript para o DFP
O Javascript do site faz a request normalmente para o DFP.
googletag.cmd.push(function() {
googletag.defineSlot('/36373682/jdm/home/interstitial', [1,1], 'home_interstitial').addService(googletag.pubads());
});###Chamada do DFP para o Javascript
Quando essa tal request bater no DFP, ele dispara um trigger para o site passando um object contendo o que é necessário para se colocar o overlay no site.
JogosDeMeninas.vent.trigger('display:overlay:ad', {
name: 'Intervencao/Home+Categorias',
src: 'https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCTmt_gTRABGAEyCH80cnMXXaEu',
width: 800,
height: 500,
x: 'center',
y: 180,
time: 20,
clickVar: 'clicktag',
link: 'http://adclick.g.doubleclick.net/aclk?sa=l&ai=CcHTuQqw-VM-1Ke3S0AHqz4CoBwEAexABILlgKASIAQGQAQDAA...',
close: 'ap',
cookie: false,
cookieExpires: 1
})Após o Javascript receber a chamada do DFP, é feito o render do template aonde ficará a intervenção no site:
<div id="overlay-ad-container">{ style: "position: absolute;z-index: 99999;left: 10px;top: 10px" }
<div id="overlay-ad-swf"></div>
</div>Colocado o template os elementos no html, é adicionado o flash e setado o time-out para remover a intervenção após o tempo enviado pelo DFP