Como Utilizar JavaScript e CSS Personalizados em Sua Landing Page

Unbounce tem uma coleção vasta de widgets in-app nativos que podem ser incorporados a sua página com um simples arrastar e soltar. No entanto, caso haja um recurso que você realmente precise para a sua página, e que não seja fornecido como um recurso in-app, você pode adicionar funções extras utilizando JavaScript e CSS (tal como uma webpage normal!). Estas personalizações são incorporadas através de jQuery (JavaScript) ou Stylesheets (CSS). É importante que você saiba que embora estejamos felizes por vê-lo personalizando sua página, só conseguimos fornecer suporte ao cliente para o editor base e a biblioteca de widget dentro do app – e não para opções customizadas.

Caso tenha dúvidas sobre seus códigos personalizados, nós o encorajamos a publicá-los no fórum da nossa comunidade, com sorte um dos experts por lá poderá te ajudar com mais dicas.

Este artigo irá ajudá-lo:

  • Adicionar códigos personalizados a sua landing page
  • Configurar os códigos personalizados com Script Manager
  • Migrar scripts existentes para o Script Manager
  • Adicionar Wigets personalizados a sua landing page

Toda página pública tem jQuery incluído

jQuery é um framework de JavaScript com um ótimo plugin API. jQuery 1.4.2 está incluído em todas as páginas por padrão.

diversos plugins jQuery disponíveis que, muito provavelmente, são de fácil implementação, desde que você tenha conhecimentos básicos de JavaScript e HTML.


Como inserir scripts personalizados em sua página

Note que há um botão na parte inferior esquerda do editor chamado Javascripts, algo semelhante a isso:

Ao clicar nele, uma caixa de diálogo será aberta, e nela você pode colar seu JavaScript personalizado:

javascripts_edit.png

Você pode escolher onde o script deve se localizar no documento – o padrão é "Before Body End Tag" (antes de ), mas você pode mudar para "After Body Tag" (depois de) ou "Head" (na seção), de acordo com a função final do script.

Alternativamente, caso envolva seu script em jQuery $(function(){ your-function-here; }) function, ele será executado apenas uma vez, assim que a página for carregada.

Seja qual for o script que esteja incluindo, lembre-se de envolvê-lo em tags script e /script, como mencionado no diálogo. Além disso, é importante lembrar que este script aparecerá apenas na preview da página, ou na página publicada (mas não no editor).


Como incluir CSS personalizado

IIncluir estilos personalizados de CSS não é diferente de incluir JavaScript personalizado. Observe o botão na parte inferior esquerda do editor chamado Stylesheets, algo semelhante a isso:

Qualquer CSS que possa ser utilizado em uma webpage normal pode ser utilizado em uma página Unbounce. A class/ID para cada objeto em sua página pode ser encontrada facilmente: primeiro selecione aquele objeto no editor Unbounce, depois busque no painel propriedades sob a seção Advanced. Isso permitirá que você escreva regras de CSS para elementos específicos (cada elemento é assinalado com um ID único).


Vocês me ajudarão a resolver problemas com meu JavaScript e CSS personalizado

Infelizmente não podemos dar suporte para Javacripts ou CSS personalizados que adicionar a sua página. Nossa equipe de desenvolvimento está trabalhando duro para aprimorar o editor básico e desenvolver uma biblioteca de widgets que não precise de script personalizado para funcionar. Se você está realmente com problemas em algo, você pode tentar postar sua pergunta no fórum de suporte da nossa comunidade. Da mesma maneira, se você escreveu algum JavaScript ou CSS personalizado que acha que pode ajudar alguém, por favor, compartilhe no fórum!


Script Manager - Adicionando Seus Scripts

O que é Script Manager?

Script Manager permite que você aplique scripts a todas as páginas de seu domínio (ou múltiplos domínios) através de um processo único. Caso tenha scripts (como Google Analytics) que precisam ser aplicados a diversas páginas, o Script Manager foi desenvolvido para tornar sua vida muito mais fácil.

Para utilizar este recurso, é necessário que você tenha seu próprio domínio personalizado. Você não pode utilizar este recurso no domínio teste 'unbouncepages.com'.

Adicionando Scripts

Caso tenha páginas sob um domínio que já contenha os scripts que deseja adicionar, pode ser que o código seja executado duas vezes. Lembre-se de remover o script da página antes de adicioná-lo no domínio para evitar conflitos.

Para adicionar um script:

  1. Clique em Settings no menu à esquerda.
  2. Clique em on Script Manager
    ScriptManager1.png
  3. Caso este seja o primeiro script que você está adicionando a diversas páginas, você será requisitado a adicionar um script. Caso contrário, clique no botão verde Add Script próximo à parte superior esquerda da tela.
    ScriptManager2.png
  4. Insira um nome para seu script e clique no botão Add Script Details.
    ScriptManager3.png
  5. Utilize o primeiro menu deslizante para escolher a localização de seu script.
    ScriptManager4.png
  6. Utilize o segundo menu deslizante para escolher entre adicionar seu script a suas landing pages, lightbox, form confirmaion dialog e all.
    ScriptManager5.png
  7. Cole ou digite o script na janela do editor.
    ScriptManager6.png
  8. Escolha os domínios nos quais quer adicionar seu script selecionando pela checkbox à direita.
    ScriptManager7.png
  9. Clique no botão Save Changes, localizado próximo a parte inferior esquerda da tela.

YSeu script será aplicado a todas as páginas do domínio escolhido e será aplicado automaticamente a todas as novas páginas públicadas no mesmo domínio.

Após habilitar seus scripts no Script Manager, você também poderá vê-los na seção de Javascript do Page Builder.


Desabilitando, Apagando ou Editando Scripts

Como desabilitar (ou habilitar novamente) ou deletar um script através do menu gear para cada script.
ScriptManager8.png

Clique em qualquer outro lugar da barra cinza de qualquer script e entre na tela de edição do script.
ScriptManager9.png


Como Migrar Scripts para o Script Manager

Quando adiciona um script ao Script Manager, é importante garantir que o script não esteja em nenhuma de suas páginas. Caso contrário, quando adicioná-lo ao Script Manager, ele pode acabar sendo executado duas vezes. Para scripts de acompanhamento, como Google Analytics ou Adwords Conversion Tracking, isto gerará um resultado com visualizações duplicadas ou conversões e dados incorretos.

A melhor maneira de evitar que isso ocorra é passar por cada página, removendo o script da página, antes de adicioná-lo ao Script Manager.

Este é um processo único, similar ao processo de migração do Google Tag.

Se a sua preocupação é não conseguir acompanhar as visualizações ou conversões de sua página no período de tempo entre remover o script da página e adicioná-lo ao Script Manager, recomendamos que delete o script das páginas, mas não os publique ainda. Então, depois deletar o script de todas as suas páginas, você pode adicionar o script ao Script Manager e, então, voltar e publicar novamente as páginas, o que deve encurtar esse período de tempo significativamente.


Script Manager - Dicas e Truques Avançados

Utilizando Variáveis na Página

OS scripts do Script Manager podem ser utilizados em algumas variáveis presentes na página.

window.ub.page.id  – D interno da Unbounce para sua página. IDs são únicos para cada página, então eles podem ser úteis para diferenciar entre as páginhas – ex.: "a07b7610-6a9e-11e4-b67a-22000b6882a2"

window.ub.page.variantId  – a letra de ID da variante atual – ex.: "a"

window.ub.page.name  – o nome que você deu a página dentro da Unbounce – Ex.: "My Page Name"

Você pode utilizar essas variavéis para fazer com que seu script se comporte de maneira diferente em páginas ou variantes diferentes. Por exemplo, você pode enviar o variantId como uma variável personalizada a sua plataforma de analytics.

Aqui está um exemplo de um script que envia a variant ID para o script do Google

 


Acompanhando o Clique de Botão como Eventos do Google Analytics em Todas as Páginas

Se você gosta de acompanhar automaticamente todos os cliques de botão e submissões de formulário como eventos do Google Analytics, o Script Manager pode ajudar!

Confira nosso artigo de suporte sobre integração com Google Analytics utilizando Script Manager.

Integrando com Google Analytics


Como incluo um HTML personalizado ou widgets em uma landing page da Unbounce?

Você pode usar nosso recurso "Custom HTML" para incluir a maior parte dos códigos de HTML, componentes baseados em script ou widgets à sua página da seguinte maneira:

  1. Arraste o botão do objeto Custom HTML da barra de objetos (na parte esquerda do editor) para o local onde gostaria que ele aparecesse em sua página.
    custom_HTML.png 
  2. Publique o script/código na janela e clique em "done".
  3. Modifique o Custom HTML até ficar do tamanho correto (isso é feito por tentativa e erro, conforme vê no preview da página).
  4. Salve sua página.
  5. Clique em "Preview" para vê-la em ação. Ela não aparecerá no editor, apenas no modo preview e na página final publicada. Alguns HTMLs personalizados podem não ser renderizados no "preview", portanto, se não aparecer no "preview", confira na página publicada.
  6. Mude novamente o tamanho do componente Custom HTML para garantir que o objeto que anexou apareça inteiramente.

Glossário

Botão Javascript: localizado na parte inferior esquerda do editor. É através dele que você pode adicionar seu script personalizado para uma funcionalidade, tal como o código de acompanhamento do Google Analytics que ainda não foi adicionado pela Unbounce.

Botão Stylesheets: localizado na parte inferior esquerda do editor a direita do botão Javascript. É por onde você pode adicionar suas fontes e cores personalizadas.

 

Esse artigo foi útil?
Usuários que acharam isso útil: 7 de 14
Powered by Zendesk