Normalmente, a maioria dos distribuidores de jogos hospeda os jogos de uma forma que pode ser facilmente jogada em tela cheia ou em iFrame em outra página da Web ou WebView em um app.
A página que hospeda o jogo (ou seja, a tela de jogo jogável) contém o código do AdSense (a tag), carrega a lógica JavaScript do jogo e geralmente contém um elemento canvas em que o jogo é renderizado.
Nosso objetivo com a API Ad Placement é minimizar o código que você precisa adicionar ao seu jogo. Assim, você pode controlar os anúncios sem precisar mudar constantemente o jogo e lançar novas versões dele.
Há muitas maneiras de criar jogos H5, usando JavaScript diretamente ou bibliotecas de terceiros para gráficos 2D e 3D que renderizam em um widget de tela, mecanismos de jogos e, em alguns casos, processos de compilação cruzada bastante complexos de outras linguagens.
A API Ad Placement foi projetada para ser executada no mesmo documento que a tela do jogo e a tag adsbygoogle. Por exemplo, se você adicionar um jogo como um iFrame
em uma página maior, a tag e todas as chamadas para a API deverão ser feitas de
dentro desse iFrame.
Exemplo de estrutura de jogo H5
O exemplo mais detalhado a seguir mostra as principais partes de uma página de jogo típica.
Há muitas maneiras de criar jogos H5, usando JavaScript diretamente ou bibliotecas de terceiros para gráficos 2D e 3D que renderizam em um widget de tela, mecanismos de jogos e, em alguns casos, processos de compilação cruzada bastante complexos de outras linguagens. Os detalhes exatos do seu jogo podem ser diferentes deste exemplo.
<head>
## The Ad Placement tag ##
# Configure your monetisation settings here and place the standard
# boilerplate code for initialising the API functions. This code may change
# depending on where the game is being distributed (eg. a website, a super
# app, different publishers).
<script async
data-ad-frequency-hint="30s"
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789" # your publisher ID
crossorigin="anonymous">
</script>
<script>
window.adsbygoogle = window.adsbygoogle || [];
var adBreak = adConfig = function(o) {adsbygoogle.push(o);}
</script>
[...]
</head>
<body>
[...]
## Your game code ##
# This is your game logic that renders the playable canvas. Once you've
# integrated your game with the Ad Placement API, this code won't change due
# to ad configuration updates.
<canvas id="game_canvas" width="100%" height="100%"></canvas>
<script src="game.js"></script>
[...]
</body>
A API Ad Placement foi projetada para ser executada no mesmo documento que a tela do jogo e a tag adsbygoogle. Por exemplo, se você adicionar um jogo como um iFrame
em uma página maior, a tag e todas as chamadas para a API deverão ser feitas de
dentro desse iFrame.
<head>
<!-- The adsbygoogle tag is not here -->
</head>
<body>
<iframe src="https://www.my-game.com" title="My game" allow="autoplay">
<!-- The game is loaded here and contains the adsbygoogle tag -->
</iframe>
</body>
Como os jogos H5 são distribuídos
Os jogos em H5 podem ser distribuídos de várias maneiras e em várias plataformas. Muitas vezes, há diferentes entidades envolvidas na criação e distribuição de jogos, incluindo:
- Desenvolvedores: as pessoas que criam os jogos.
- Mecanismos: empresas que fornecem as ferramentas para criá-los.
- Provedores de hospedagem: hospedam jogos.
- Distribuidores: trabalham com desenvolvedores para criar catálogos de jogos com muitos recursos.
- Publishers: proprietários da origem de tráfego que querem colocar jogos nos sites ou apps deles.
Em muitos casos, as entidades podem abranger essas funções. Por exemplo, você pode desenvolver, hospedar e publicar seus próprios jogos.
Os jogos podem ser jogados de diferentes maneiras, incluindo:
- Tela cheia: ocupam toda a tela para uma experiência imersiva.
- iFrame/WebView: onde eles são veiculados em parte de um documento maior.
- Incorporados: são colocados diretamente em páginas com outros conteúdos.
As experiências em tela cheia e iFrame se aplicam à Web e a apps. Nesse caso, "iFrame" também pode se referir a uma WebView incorporada em um app. Esperamos que a maioria dos jogos seja distribuída dessa forma. Os jogos incorporados são experiências exclusivas da Web.
Lembrete
- O anúncio é exibido no documento HTML que contém a tag.
- O anúncio precisa sempre cobrir totalmente o documento em que está inserido.
- A tag e o jogo precisam estar sempre no mesmo documento.