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

Com o recurso de incorporação de conteúdo, você pode crie seções de conteúdo no HubSpot e incorpore-os em seu site. Para adicionar um conteúdo incorporado a uma página de site externo, você pode usar o plugin de incorporação de conteúdo para o editor Gutenberg do WordPress ou copie o código de incorporação diretamente no HubSpot.

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

Observe: O conteúdo incorporado não é carregado por meio de um iframe, mas é injetado via JavaScript. Os mecanismos de pesquisa podem executar JavaScript e capturar o conteúdo incorporado, evitando assim quaisquer desafios de SEO que os iframes possam apresentar.

Copie o código de incorporação

Para copiar o código de incorporação para 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 Mais e selecione Obter código de incorporação.
  
  
• Na caixa de diálogo, clique em Cópia para copiar o código de incorporação.

Você pode então colar o código de incorporação no seu conteúdo externo, conforme necessário. Ao colar o código de incorporação, tenha em mente o seguinte:

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

Entenda as práticas recomendadas para incorporar conteúdo

Dependendo de como você usa o código de incorporação, é possível que o conteúdo possa impactar a aparência da sua página. Pontuação de mudança de layout cumulativa (CLS), que mede o quanto o conteúdo da sua página se move na janela de visualização do visitante durante o carregamento. Há dois fatores que impactarão sua pontuação no CLS:

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

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

Incorporar abaixo da dobra

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

Alterar o local 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 conteúdo em uma página externa, é recomendável mover o script de incorporação para <head> da página em vez de ao lado do script de criação de incorporação.

Defina uma altura mínima

A altura do contêiner de incorporação de conteúdo afetará o quanto o conteúdo ao redor dele se deslocará durante o carregamento. A altura do contêiner depende dos módulos e do conteúdo incluído — quanto mais conteúdo incorporado, mais a página se deslocará. 

Por esse motivo, se você estiver incorporando seu conteúdo acima da dobra, é recomendável definir uma altura mínima de incorporação incluindo uma linha min-height Regra CSS no wrapper do contêiner de incorporação.

Se você estiver incorporando conteúdo em um CMS externo, pode haver opções de layout disponíveis no editor de página externo para atualizar a altura de incorporação. Caso contrário, você pode adicionar manualmente esse estilo ao nível superior do conteúdo incorporado <div>, conforme 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>

Observe: 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 do 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 pré-visualização de conteúdo no WordPress. 

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

• Clique com o botão direito do mouse em conteúdo incorporado, e selecione Inspecionar.
• No painel do inspetor, passe o mouse sobre o nível superior <div> do conteúdo incorporado.
• Para visualizar a altura calculada, alguns navegadores exibirão a altura do contêiner ao passar o mouse, ou você pode clicar no Computado aba na gaveta de ferramentas do desenvolvedor e procure por altura atributo.