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:

Adicione um novo evento clicando no botão Adicionar evento na parte inferior do painel Eventos.
Selecione o destino e o evento.
Para isso, selecione Personalizada > Adicionar ação personalizada. O Google Web Designer solicitará que você insira seu código personalizado.
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.
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.
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.

Isso foi útil?

Como podemos melhorá-lo?

Criar ações personalizadas

Exemplos

Isso foi útil?

Precisa de mais ajuda?

Siga as próximas etapas: