O MID (Mídia Interativa Digital) é uma poderosa ferramenta de integração com o usuário, projetada para coletar feedback e promover interatividade em anúncios em formato HTML5 e VPAID. Com o MID, você pode envolver seu público-alvo por meio de animações, botões de interação e coleta de feedback em tempo real.
Interatividade Avançada: Crie anúncios com botões de resposta, animações e muito mais para envolver os usuários de forma eficaz.
O MID permite interações com os usuários, independentemente do dispositivo em que visualizam os anúncios. Além disso, ele suporta formatos fixos seguindo os padrões IAB, garantindo a compatibilidade com diversas plataformas.
Utilize macros para capturar feedback dos usuários em tempo real, permitindo análises instantâneas de desempenho.
Acompanhe o desempenho de seus anúncios com um dashboard dinâmico que fornece dados precisos sobre quantidade de impressões, quantidade de cliques nas respostas, avaliação das respostas e muito mais. Tenha insights detalhados para otimizar suas campanhas.
O MID permite criar anúncios interativos que se destacam e cativam a atenção do público.
O MID é a ferramenta ideal para integrar os usuários em seus anúncios, coletar feedback valioso e promover uma experiência interativa. Seja na forma de anúncios de display ou anúncios de vídeo, essa solução oferece a flexibilidade e a eficácia necessárias para se destacar no mundo da publicidade digital. Comece a utilizar o MID hoje mesmo e eleve sua estratégia de publicidade a um novo patamar!
Bem-vindo à documentação técnica do MID (Mídia Interativa Digital HTML5). Neste guia, forneceremos detalhes sobre os requisitos, bem como informações sobre scripts, postag e as macros necessárias
Todos os códigos e recursos devem ser referenciados no arquivo index.js usando caminhos relativos aos recursos incluídos no arquivo ZIP.
Todo o código de animação, funções e chamadas de macros devem estar contidos no arquivo index.js e não podem estar em arquivos de script separados.
As peças MID HTML5 devem conter a seguinte tags para identificação do formato da peça:
<meta name="ad.size" content="width=300,height=250">
dictionary.json à pasta .ZIP. O arquivo dictionary.json deve conter as perguntas a serem enviadas e traduzidas pela ferramenta .A Chave do objeto nunca deverá conter espaços, acentos ou caracteres especiais, enquanto o valor será exatamente a pergunta a ser feita.
{
"conhece_o_mid": "Você já conhece o MID"
}
Para tornar a peça MID interativa e clicável, siga as seguintes diretrizes:
<body>:<script src="https://cdn.00px.net/static/postag.js"></script>
const spaceTracker = SpaceTracking("%%TOKEN%%");
Para garantir que os usuários possam clicar nos botões de callback (por exemplo, "SIM", "NÃO"), o código deve incluir o script postag.js. Se você não incluir esse script, o MID Ads não conseguirá receber ação do usuário.
Nas peças MID HTML5 o retarget deverá ser feito da forma convencional usando a clicktag padrão de um banner feito em HTML5, por exemplo:
<a href="%%CLICKTAG%%" target="_blank">
Em hipótese alguma a clicktag poderá ficar sobre os botões de respostas.
onclick:onclick="spaceTracker('RESPOSTA 1', function () {
startAnimation()
Substitua 'RESPOSTA 1' pelo texto da resposta que aparecerá no dashboard e startAnimation() pela função que inicia a animação desejada. Repita esse processo para cada resposta desejada.
Para fins de teste e homologação, é fornecido um token genérico. No entanto, o token final só será processado após o upload ser feito na plataforma da ferramenta.
const spaceTracker = SpaceTracking(
"eyJjciI6NjQ2MTEsImNhIjo0MT4yLCJwbCI6NTAwOTJ9"
const spaceTracker = SpaceTracking("%%TOKEN%%");
A não realização da troca das macros de homologação pela de produção resultará no não funcionamento da peça.
O envio do material para a tag de vídeo VPAID requer o fornecimento de dois arquivos: o vídeo e o MID HTML5 com funcionalidades, padrões, tags e macros específicos. A principal diferença é que o arquivo HTML do MID deve ser responsivo, sem um tamanho fixo determinado.
Para garantir que o MID HTML5 seja responsivo e se adapte a diferentes tamanhos de tela, é necessário definir o seguinte CSS:
#mid-container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
border: 1px solid grey;
box-sizing: border-box;
}
Isso permite que o MID se expanda para preencher a tela do dispositivo no qual o anúncio será reproduzido.
Para que o MID funcione corretamente na tag VPAID, o vídeo associado a ele deve conter uma parte sem informações para permitir que a animação do MID HTML seja executada. Isso significa que, em um vídeo de 30 segundos, apenas 20 segundos devem conter as informações desejadas. Os outros 10 segundos serão substituídos pela animação do MID HTML, que será incorporada ao vídeo quando for feito o upload da peça na ferramenta de envio.
Em um vídeo de 30 segundos, 20 segundos podem conter as informações desejadas.
Os outros 10 segundos serão preenchidos pela animação do MID HTML, que deve ser enviada junto com o vídeo.
Certifique-se de que todos os arquivos, incluindo o MID HTML5 e o vídeo, contenham a propriedade box-sizing: border-box em seu seletor CSS principal. Isso evita que as bordas acrescentem pixels ao tamanho original do criativo e garante a consistência visual.
#mid-container {
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="pt-br">
<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" />
<meta name="ad.size" content="width=300,height=600">
<title>MID-300x600</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js">
</script>
</head>
<body>
<div id="mid-container">
<img src="astronauta.jpg" id="astronalta" />
<img src="logo.png" id="logo" />
<div id="interactive-box">
<h2 id="h2">JÁ CONHECE O MID?</h2>
<p>A MÍDIA INTERATIVA DIGITAL</p>
<button
onclick="spaceTracker('Não', function () {
startAnimation()
})">
Não
</button>
<button
onclick="spaceTracker('Sim', function () {
startAnimation()
})">
Sim
</button>
</div>
<img src="img.png" id="img" />
</div>
<script src="https://cdn.00px.net/static/postag.js"></script>
<script>
// Constante para produção. Somente deve conter no código quando o material estiver aprovado e finalizado para o envio.
const spaceTracker = SpaceTracking("%%TOKEN%%");
// Constante para homologação. Deverá ser removida no envio do material.
const spaceTracker = SpaceTracking(
"eyJjciI6NjQ2MTEsImNhIjo0MT4yLCJwbCI6NTAwOTJ9"
window.onload = function () {
tlf1.play();
};
function startAnimation() {
tlf2.play();
}
let tlf1 = gsap.timeline();
let tlf2 = gsap.timeline();
tlf1
.to("#i01", {
x: "random(-60, 0, 5)",
y: "random(-600, -550, 5)",
duration: 10,
ease: "elastic.out(1, 0.4)",
})
.to(
"#i02",
{ y: -60, duration: 4, opacity: 1, ease: "elastic.out(1, 0.4)" },
"-=8"
)
.to("#box", { y: -200, duration: 1, opacity: 1, ease: "outin" }, "-=6")
.paused(true);
tlf2
.to("#i01", { x: -300, duration: 1, opacity: 0 }, 0)
.to("#i02", { y: -60, duration: 1, opacity: 0 }, 0)
.to("#box", { y: 200, duration: 1, opacity: 0 }, 0)
.to(
"#i03",
{ y: -300, duration: 4, opacity: 1, ease: "elastic.out(1, 0.4)" },
1
)
.paused(true);
</script>
</body>
</html>
Isso completa a documentação técnica do MID HTML5 e MID VPAID. Certifique-se de seguir essas diretrizes ao criar e fazer o upload das suas peças MID para garantir que funcionem corretamente.