A página de ajuda do Squarespace diz que o código inserido no seu campo de injeção no cabeçalho é colocado no elemento head "em todas as páginas do seu site".1 A página de ajuda do Ghost diz que os scripts adicionados ao Site Header "vão aparecer em cada uma das páginas do seu site".2 A página do Webflow diz que o código na seção Head code "se aplica ao seu site inteiro".3 Cada fornecedor responde em uma frase à pergunta que um editor faz primeiro: onde colocar um script para que ele rode em todos os lugares. O WordPress responde à mesma pergunta em dois lugares, porque um tema do WordPress pode ser construído com blocos ou com código.

Cada plataforma hospedada limita o campo para todo o site pelo plano, não pela habilidade

No Squarespace, o campo é a caixa de cabeçalho do painel Code Injection.1 A mesma página diz que a injeção de código "está disponível nos planos Core, Plus, Advanced e em alguns planos de cobrança antigos".1 O Ghost mantém a sua versão em Settings, depois Advanced, depois Code Injection, com uma caixa Site Header para o head e uma caixa Site Footer para o fim do body.2 O Webflow mantém a sua versão na aba Custom code das Site settings, com seções Head code e Footer code de até 50.000 caracteres cada.3 A página do Webflow acrescenta que o código personalizado exige um Workspace Core, Growth, Agency ou Freelancer, ou um site com um plano Site ativo.3

O obstáculo em uma plataforma hospedada, quando existe, é o plano de cobrança, e não o código. Um editor com um plano que inclui o campo pode colar um elemento script sem abrir nenhum template. Um editor com um plano que não o inclui não pode.

O WordPress documenta dois lugares, e a função da conta decide se o primeiro funciona

A própria documentação do WordPress descreve o Editor do site como a ferramenta para criar "o site inteiro, incluindo o cabeçalho, o rodapé e tudo o que há entre eles, com blocos".4 A mesma página diz que o Editor do site só está disponível quando um tema de blocos está ativo e define uma parte de template como um bloco "para gerenciar as áreas globais repetidas do site".4 Um bloco HTML personalizado colocado na parte de template do rodapé aparece onde quer que essa parte seja usada. O bloco em si é adicionado pelo insersor de blocos ou digitando /html em um novo bloco de parágrafo.5

A página do bloco HTML personalizado traz um detalhe que decide se o script colado é mantido. A partir do WordPress 7.0, o bloco tem painéis separados para HTML, CSS e JavaScript, e os painéis de CSS e JavaScript "só estão disponíveis para usuários com a capacidade unfiltered_html".5 Para um usuário que não a tem (o exemplo da página é um Colaborador), o WordPress higieniza o bloco com wp_kses e remove as tags não permitidas, entre elas a tag script.5 A função da conta que faz a colagem é, portanto, parte da configuração.

O próprio código de um tema é o lugar que resta. O Theme Handbook diz que temas e plugins devem carregar scripts "usando o método padrão do WordPress": uma função de enfileiramento chamada na ação wp_enqueue_scripts.6 A mesma página mostra uma chave 'strategy' => 'defer' nos argumentos da função, que carrega o script de forma adiada, com uma opção 'async' ao lado.6 Um plugin da AdBubbles para WordPress está planejado; até que ele exista, esses dois lugares são os que o WordPress documenta.

A forma como o script carrega importa mais do que o campo que o contém

O padrão HTML descreve três comportamentos para um elemento script clássico. Um script sem o atributo defer nem o async é, nas palavras do padrão, "buscado e avaliado imediatamente, bloqueando a análise até que ambas as coisas estejam concluídas".7 Com defer, o script "será buscado em paralelo e avaliado quando a página terminar de ser analisada".7 Um script async é buscado em paralelo e "avaliado assim que estiver disponível (possivelmente antes de a análise terminar)".7 O campo decide onde o navegador encontra o elemento; o atributo decide o que o navegador faz ali.

O script de incorporação, adbubbles.js, é um único arquivo estático, escrito em JavaScript puro, sem dependências, servido pelo cache da Cloudflare, e carrega depois que o DOM da página está pronto. Abrir uma conta de editor não custa nada, e o script de incorporação também não. Um editor que adicionou um site pode solicitar um rastreamento que mostra quais das suas palavras podem ser vendidas no momento antes de colar qualquer coisa. A página de instalação traz o elemento script exato a colar.

O escopo é a decisão que exige reflexão

Com o script em todas as páginas, resta uma decisão que nenhuma página de ajuda de fornecedor pode tomar. O escopo é a parte de uma página que o script de incorporação pode examinar, por exemplo o elemento article ou o contêiner entry-content. Mesmo dentro do escopo, o script de incorporação deixa intactos títulos, links, código, texto pré-formatado, controles de formulário, navegação, cabeçalho e rodapé, além de qualquer coisa que o editor marque com data-noads. Ele sublinha a primeira ocorrência de cada palavra comprada. Uma bolha por palavra é o limite, e duas nunca dividem um parágrafo.

Suponha que um tema do WordPress envolva cada post em um contêiner com a classe entry-content e mostre uma breve biografia do autor em uma barra lateral. Um escopo entry-content significa que a biografia nunca é examinada, embora esteja na página e possa conter palavras compradas. Um escopo que abrange todo o elemento main significa que a biografia também é examinada, e uma bolha pode se abrir ali em vez de no artigo. Nenhuma das escolhas é errada, mas elas vendem palavras diferentes.

Ao lado do escopo, a conta guarda o máximo de bolhas por página, as categorias de anunciantes a excluir e a verificação do site. A verificação assume uma de três formas: um registro DNS TXT, uma meta tag ou um arquivo enviado. A página do Ghost lista as meta tags entre as coisas para as quais serve o seu campo Site Header, então o campo que contém o script também contém a tag.2 Um editor que controla o DNS pode adicionar o registro em vez disso.

Todo link dentro de uma bolha traz rel="sponsored noopener". O Google Search Central diz para marcar "links que são anúncios ou posicionamentos pagos" com o valor sponsored e permite vários valores de rel em uma lista separada por espaços.8 O editor não acrescenta nada, porque o script de incorporação renderiza o link já com o atributo. A bolha é renderizada dentro de um Shadow DOM, então o CSS do site e o CSS da bolha não podem afetar um ao outro.

O que sai da página são três beacons: uma visualização por carregamento de página, uma abertura quando uma bolha fica visível por um segundo e um clique quando um link é seguido. A AdBubbles não define cookies, não armazena identificadores e não coleta dados pessoais dos leitores. A associação é entre palavras da página e um anunciante que as comprou. Não escolhemos quais leitores veem uma bolha, não seguimos um leitor entre páginas ou sites e não prometemos resultados.

O ponto prático para um site com vários templates é a diferença entre um campo para todo o site e um campo de página. Squarespace, Ghost e Webflow indicam, cada um, um campo que alcança todas as páginas, e o Webflow também oferece um campo cujo código "só se aplicará àquela página".3 Um editor ganha quando um leitor segue o link de uma bolha, e uma bolha só pode se abrir onde o script de incorporação rodou. Um script colado em um campo de página pode produzir bolhas naquela única página, e o campo para todo o site é o que coloca o script de incorporação em todas as páginas.