Criar ações personalizadas

 

É possível criar ações personalizadas usando JavaScript. Depois de definir uma ação personalizada, será possível usá-la novamente no documento.

Para criar uma ação personalizada:

1. Adicione um novo evento clicando no botão Adicionar evento na parte inferior do painel Eventos.
2. Selecione o destino e o evento.
3. Para isso, selecione Personalizada > Adicionar ação personalizada. O Google Web Designer solicitará que você insira seu código personalizado.
   
4. Dê um nome à ação no campo acima da caixa de código (após o prefixo gwd.).
   • Cada ação personalizada precisa ter um nome exclusivo no documento.
   • O nome deve ser descritivo para que possa ser reconhecido.
   • Se você digitar um nome inválido (como um nome que inclua espaços), o campo será sublinhado em vermelho.
5. Defina a função na caixa de código. Consulte as APIs do componente para ver uma lista de propriedades, eventos e métodos disponíveis para cada componente.
6. Clique em OK

O evento está configurado para usar sua ação personalizada. Esta ação também está disponível para uso em outros eventos, listados em Personalizado.

Você pode redimensionar a caixa de diálogo arrastando o canto inferior direito.

Exemplos

As ações personalizadas podem ser usadas em conjunto com os componentes para ampliar a funcionalidade do Google Web Designer. Todos os exemplos a seguir usam o método document.getElementById para especificar o elemento no documento a que a ação se aplica.

Ativar o som de um vídeo cada vez que ele for reproduzido

Adicione o seguinte evento:

Destino	gwd-video_1 ou o código do vídeo do YouTube.
Evento	Vídeo > Reproduzir após pausa
Ação	Personalizada > Adicionar ação personalizada
Código personalizado	if (document.getElementById('gwd-video_1').muted) { document.getElementById('gwd-video_1').mute(); }

 

Para usar este código:

• Substitua gwd-video_1 pelo código do seu vídeo.

Como exibir uma legenda para cada frame em uma Galeria deslizante

Adicione o seguinte evento:

Destino	gwd-swipegallery_1 ou o código da sua Galeria deslizante
Evento	Galeria deslizante > Frame mostrado
Ação	Personalizada > Adicionar ação personalizada
Código personalizado	var gallery = document.getElementById('gwd-swipegallery_1'); var div = document.getElementById('caption-div'); var text = { 1: "The text for frame 1", 2: "The text for frame 2", 3: "The text for frame 3" }; div.textContent = text[gallery.currentIndex];

 

Para usar este código:

• Substitua gwd-swipegallery_1 pelo código da sua Galeria deslizante.
• Substitua caption-div pelo código do elemento de texto que exibe a legenda.
• Substitua o texto da legenda de cada frame no código personalizado.

Como exibir a próxima página do seu anúncio depois de uma pausa de dois segundos

Adicione o seguinte evento:

Destino	page1 ou o código da sua página inicial
Evento	Página > Pronto para abrir a página
Ação	Personalizada > Adicionar ação personalizada
Código personalizado	setTimeout(nextPage, 2000); function nextPage() { document.getElementById('pagedeck').goToNextPage(); }

 

Para usar este código:

• Substitua page1 pelo código da página inicial.