Passar para o conteúdo principal
Todas as coleçõesConstrutor de Sites/BuilderElementos
Como funciona o elemento Script na Rockty
Como funciona o elemento Script na Rockty

Aprenda como inserir códigos por elemento Script em suas páginas

Sylas avatar
Escrito por Sylas
Atualizado há mais de uma semana

Introdução

O elemento Script na Rockty permite que você adicione códigos personalizados às suas páginas. Isso é útil para várias finalidades, como:

  • Marcar conversões (como pixels e tags de rastreamento);

  • Gerar animações;

  • Incluir formulários e outros elementos externos;

  • Estilizar elementos;

  • Incorporar mapas de calor, entre outros.


1. Como Adicionar um Elemento Script

Para adicionar um elemento Script à sua página, siga estas etapas:

  1. Adicione um novo elemento na sua página.

  2. Selecione o elemento 'Script' na lista de opções disponíveis no menu lateral esquerdo.

💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais.


2. Passo a Passo para adicionar um código usando o Elemento Script

  1. Acessando o elemento Script
    Após adicionar o elemento Script à sua página, uma mensagem aparecerá no topo central da tela, indicando que a página possui o elemento Script. A mensagem será exibida em uma barra cinza com texto verde neon, conforme indicado na imagem a seguir:

  2. Inserir o Código
    Clique no texto verde que aparece na mensagem. Isso abrirá uma janela onde você poderá inserir o código desejado.

  3. Escolher a Localização do Código
    Na janela de inserção do elemento Script, você deve selecionar onde o código será inserido: no Body do HTML ou no Header do HTML. A escolha da localização pode afetar como e quando o código é carregado e executado.

    Body do HTML

    • O que é: Esta é a parte principal da página onde o conteúdo visível (como textos, imagens e outros elementos) é exibido.

    • Quando usar: Escolha o Body para códigos que precisam ser carregados após o carregamento do conteúdo da página. Isso é útil para scripts que adicionam ou manipulam elementos visuais ou interativos depois que a página já está visível para o usuário. Por exemplo, códigos de rastreamento que coletam dados sobre interações do usuário geralmente são colocados aqui para garantir que a página já tenha sido carregada.

    Header do HTML

    • O que é: Esta é a parte do código HTML que vem antes do conteúdo visível da página. O Header é usado para incluir meta-informações, links para estilos e scripts que precisam ser carregados antes do conteúdo da página.

    • Quando usar: Escolha o Header para códigos que devem ser carregados e executados antes que o conteúdo da página seja exibido. Isso é útil para scripts que configuram a página ou fazem ajustes importantes logo no início do carregamento. Por exemplo, códigos para rastreamento de conversões ou bibliotecas de scripts que devem estar prontos antes que qualquer interação do usuário ocorra.

  4. Excluir o Elemento Script
    Se precisar remover o elemento Script, clique no ícone de lixeira.

  5. Fechar a janela
    Após adicionar e configurar o código no elemento Script, clique no ícone em formato de X para fechar a janela. Não se esqueça de salvar a página para garantir que as alterações sejam aplicadas corretamente.


Conclusão

O elemento Script oferece flexibilidade para integrar recursos externos em suas páginas na Rockty. Sempre teste o comportamento dos códigos inseridos na página publicada para garantir compatibilidade e funcionalidade desejada.


Dicas Adicionais para Uso do Elemento Script

Teste Sempre na Página Publicada: Nem todos os códigos se comportam da mesma forma no ambiente de edição e na página publicada. Sempre teste o funcionamento do código após publicar a página para garantir que tudo está funcionando conforme o esperado.

Verifique a Compatibilidade do Código: A Rockty oferece suporte a scripts nas linguagens HTML, CSS e JavaScript. No entanto, alguns códigos podem não ser compatíveis com a estrutura da Rockty ou podem afetar o desempenho da página. Antes de publicar, faça testes para verificar se o código não está causando lentidão ou outros problemas.

Mantenha o Código Limpo e Simples: Evite adicionar códigos muito extensos ou complexos no elemento Script, pois isso pode impactar a performance da página. Sempre prefira códigos otimizados e necessários.

Use de Forma Moderada: Inserir muitos elementos Script em uma mesma página pode sobrecarregar o carregamento da página, especialmente se os códigos forem pesados ou envolverem múltiplas chamadas externas. Use com moderação para manter uma boa experiência do usuário.

Segurança do Código: Certifique-se de que o código que você está inserindo é de uma fonte confiável. Códigos maliciosos podem comprometer a segurança do seu site e dos dados dos usuários.

Considere Alternativas Nativas: Sempre que possível, prefira usar funcionalidades nativas da Rockty em vez de códigos externos. Isso garante maior compatibilidade e menor risco de problemas de desempenho ou segurança.

Atualize e Monitore Regularmente: Códigos de terceiros podem mudar ou expirar. Monitore regularmente os scripts em sua página para garantir que eles ainda funcionam como esperado.

Considere a Responsividade: Lembre-se de testar o comportamento do código inserido em diferentes dispositivos (desktop, tablet, mobile) para garantir que ele seja responsivo e se adapte bem a todas as telas.

Boas Práticas: Para saber mais sobre as boas práticas na inserção de scripts para integração com Meta Pixel, Google Tag Manager (GTM), Google Analytics, LinkedIn e TikTok, consulte nosso tutorial completo aqui.


Precisa de Ajuda?

Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!

Respondeu à sua pergunta?