Incorporar conteúdo usando um código de incorporação

Com o recurso de incorporação de conteúdo, você pode criar seções de conteúdo no HubSpot e, em seguida, incorporá-las ao seu site. Para adicionar uma incorporação de conteúdo a uma página de site externa, você pode usar o plug-in de incorporação de conteúdo para o editor Gutenberg do WordPress ou copiar o código de incorporação diretamente no HubSpot.

Abaixo, saiba mais sobre como copiar o código de incorporação de conteúdo, além das práticas recomendadas para manter a pontuação de Cumulative Layout Shift (CLS) da página.

Observação: o conteúdo de incorporação não é carregado através de um iframe, mas é injetado via JavaScript. Os mecanismos de pesquisa podem executar JavaScript e escolherão o conteúdo de incorporação, evitando, portanto, quaisquer problemas de SEO que os iframes possam apresentar.

Copiar código de incorporação.

Para copiar o código de uma seção de incorporação de conteúdo:

• Na sua conta da HubSpot, acesse Conteúdo > Embeds.
• Passe o mouse sobre uma incorporação e clique em Mais e selecione Obter código de incorporação.
  
  
• Na caixa de diálogo, clique em Copiar para copiar o código de incorporação.

Em seguida, você pode colar o código de incorporação no conteúdo externo conforme necessário. Ao colar o código de incorporação, lembre-se do seguinte:

• Uma incorporação de conteúdo recebe o estilo da página em que está incorporada, não do HubSpot. Para ajustar a aparência da incorporação de conteúdo, você precisará atualizar o CSS da página. Se você estiver usando o WordPress, saiba como adicionar CSS personalizado.
• O código de incorporação de conteúdo não inclui seu código de rastreamento da HubSpot. Você precisará instalar o código de rastreamento separadamente nas páginas externas para aproveitar os recursos do HubSpot, como análise de tráfego e banners de consentimento privado.
• Para incorporar conteúdo via código de incorporação, o HubSpot insere a incorporação de conteúdo por meio do rodapé de domínio padrão hs-sites. Isso ajuda a preservar os rodapés específicos do seu domínio. No entanto, qualquer conteúdo incluído no rodapé hs-sites será inserido na página externa junto com a incorporação de conteúdo. Por exemplo, se você tiver uma isenção de direitos autorais no rodapé de domínio hs-sites, os direitos autorais aparecerão na página externa com o conteúdo de incorporação. Saiba como modificar conteúdo em rodapés específicos de domínio.
  
  

Compreender as práticas recomendadas para incorporação de conteúdo

Dependendo de como você usa o código de incorporação, é possível que o conteúdo possa afetar a pontuação de Cumulative Layout Shift (CLS), que mede quanto o conteúdo da página se move no viewport do visitante durante o carregamento. Há dois fatores que afetarão sua pontuação de CLS:

• A localização da incorporação, incluindo se está acima ou abaixo da dobra e onde o script é incorporado.
• A altura da incorporação, que está diretamente relacionada aos módulos incluídos na incorporação de conteúdo. Quanto mais módulos estiverem incluídos, mais o layout da página poderá mudar conforme o conteúdo é carregado.

Se você tiver um impacto negativo na pontuação de CLS após incorporar o conteúdo, consulte as seções de práticas recomendadas abaixo para obter possíveis soluções.

Incorporação abaixo da dobra

Quando possível, o conteúdo deve ser incorporado abaixo da dobra da página. Isso ocorre porque a pontuação de CLS se aplica ao conteúdo acima da dobra, já que é isso o que o visitante normalmente vê no carregamento inicial da página. A incorporação abaixo da dobra reduzirá qualquer mudança de layout inicial causada pela incorporação de conteúdo, melhorando a experiência do usuário e reduzindo a pontuação negativa de CLS.

Alterar a localização do script de incorporação

Por padrão, o código de incorporação de conteúdo inclui o script de incorporação (linha 2 abaixo).

<div id="hs-embed-61405464936-1wgzc8">
 <script type="text/javascript" src="[EMBED SCRIPT SRC]">
 </script>
 <script>
 hbspt.content.create({...});
 </script>
</div>

Ao incorporar o conteúdo em uma página externa, é recomendado mover o script de incorporação para o <head> da página em vez de ao lado do script de criação de incorporação.

Definir uma altura mínima

A altura do contêiner de incorporação de conteúdo afetará o quanto o conteúdo em torno dele será deslocado durante o carregamento. A altura do contêiner depende dos módulos e do conteúdo incluído — quanto mais conteúdo for incorporado, mais a página será deslocada. 

Por esse motivo, se você estiver incorporando o conteúdo acima da dobra, é recomendado definir uma altura mínima para a incorporação, incluindo uma regra de CSS min-height inline no wrapper do contêiner de incorporação.

Se você estiver incorporando conteúdo em um CMS externo, poderá haver opções de layout disponíveis no editor de página externa para atualizar a altura da incorporação. Caso contrário, você poderá adicionar manualmente esse estilo ao <div> de nível superior do conteúdo incorporado, como mostrado abaixo.

<div id="hs-embed-61405464936-1wgzc8" style="min-height: 500px;">
 <script type="text/javascript" src="[EMBED SCRIPT SRC]"></script>
 <script>
 hbspt.content.create({...});
 </script>
</div>

Observação: se você personalizar o conteúdo incorporado por página, talvez seja necessário atualizar a regra de altura mínima em cada página para que o conteúdo seja exibido corretamente.

Para encontrar a altura mínima, você pode inspecionar a página onde o conteúdo está incorporado. Para páginas da HubSpot, você pode usar o recurso de visualização de página para encontrar a altura mínima antes de publicar a página. Saiba mais sobre como visualizar conteúdo no WordPress. 

Ao exibir a página com o conteúdo incorporado:

• Clique com o botão direito do mouse na incorporação de conteúdoe selecione Inspecionar.
• No painel do inspetor, passe o mouse sobre o nível superior de <div> do conteúdo incorporado.
• Para exibir a altura calculada, alguns navegadores exibirão a altura do contêiner em foco ou você pode clicar na guia Calculado na gaveta de ferramentas de desenvolvedor e procurar o atributo altura.