https://youtu.

be/drcQlbIEkik

Google Web Designer

https://youtu.be/Cs4aHzag7ig Tablas e indices de figuras en WORD

Consejos de diseñador web de Google - Parte 2

Este documento recopila los principales consejos recopilados de años de ayudar a

los usuarios en el foro y de las publicaciones del blog de Google Web Designer .

1. Escribir acciones personalizadas para eventos.

Problema : cuando necesita una acción que no está disponible en el cuadro de
diálogo Eventos.
Solución : Puede escribir acciones personalizadas en el Diseñador web de Google
fácilmente usando los siguientes consejos:

 Utilice el método setTimeout para llamar a una función o evaluar una

expresión después de un número específico de milisegundos (consulte el ejemplo
1 a continuación).

 Agregue un evento para realizar una acción, luego copie esa acción en la
vista de Código para usar en su acción personalizada (vea el ejemplo 1 a
continuación).

 Use la vista Código para agregar una variable global (debajo de la línea
window.gwd = window.gwd || {};) si desea establecer un indicador y solo
desencadenar un evento cuando la condición es verdadera (vea el ejemplo 2 a
continuación).

 Si desea usar un evento que no se encuentra en la lista del panel Eventos

(p. Ej., 'Cambiar'), puede agregar un evento que exista en el cuadro de diálogo
Eventos y luego editarlo en la vista Código (consulte el ejemplo 3 a
continuación).

 Consulte nuestra página de ayuda en las API de componentes para

conocer las propiedades, métodos, eventos y más ejemplos.

Ejemplo 1: vaya a una página diferente después de 5 segundos (use setTimeout)

Nota: esta sugerencia se puede usar para ir a otra página después de 30 segundos
para cumplir con los requisitos de AdWords de que las animaciones del estado no
pueden durar más de 30 segundos.

En este ejemplo, hay una animación que se repite infinitamente en la primera

página y una segunda página sin ninguna animación. Agregaremos un evento
para que, 5 segundos después de que se muestre la primera página, vaya a la
segunda página.

Para comenzar, queremos encontrar el código que va a la segunda página para

que podamos usar esto en nuestra acción personalizada. Esto se puede hacer
agregando un evento para ir a la segunda página. El evento específico no
importa, ya que solo nos preocupa la acción en este momento (ir a la segunda
página).

1. Abra el panel Eventos y haga clic en el botón + para agregar un evento.

2. Seleccione la ID de página para la primera página como el destino.

3. Seleccione Mouse> Click como el Evento.

4. Seleccione Anuncio de Google> Ir a la página como Acción.

5. Seleccione gwd-ad como el receptor.

6. Seleccione la segunda página (page1_1 en este ejemplo) en

Configuración. También puede establecer otros ajustes, como el tipo de
transición, la duración, etc.

7. Haga clic en Aceptar para guardar.

8. Cambie a la vista Código y busque: script type = "text / javascript" gwd-
events = "handlers". Copia el código de acción para ir a la segunda página.

Vuelva a la vista Diseño. Ahora agregaremos la acción personalizada que se

activará 5 segundos después de que se muestre la página.

1. En la primera página con animación, haga clic en el botón + en el panel

Eventos para agregar un evento.

2. Seleccione la primera ID de página como destino.

3. Seleccione Página> Listo para presentar la página como el Evento.

4. Seleccione Personalizado> Agregar acción personalizada como Acción.

5. En el cuadro de diálogo Código personalizado, nombre su función. En este

caso, puede usar un nombre como after5s. Luego ingrese el siguiente código,
pegando el código de acción que copió anteriormente: setTimeout (gotoPage,
5000); function gotoPage () {gwd.actions.gwdDoubleclick.goToPage ('gwd-ad',
'page1_1', 'none', 1000, 'linear', 'top'); }

6. Haga clic en Aceptar para guardar.

Elimine el primer evento que agregó solo para generar el código de acción para
copiar:

Ahora tiene el archivo de trabajo que va a la segunda página 5 segundos después

de que se muestra la primera página.

Ejemplo 2: use eventos de la línea de tiempo para hacer un bucle del anuncio en

todas las páginas dos veces.

En este ejemplo, el anuncio tiene 3 páginas con animación, cada una con un
evento para ir a la página siguiente una vez que la animación haya finalizado.

El anuncio recorre dos veces todas las páginas, es decir, página 1> página 2>
página 3, repite una vez más y termina en la página 3 después del segundo
ciclo. Agreguemos eventos de la línea de tiempo en cada página para ir a la
página siguiente al final de la animación.
Agregue un evento de línea de tiempo para ir a la página siguiente al final de la
animación.

1. En la primera página, en el último fotograma clave, haga clic con el botón

derecho en la capa Eventos y seleccione Agregar evento .

2. Haga doble clic en el marcador de evento para abrir el cuadro de diálogo

Eventos.

3. Seleccione Anuncio de Google> Ir a la página como Acción.

4. Seleccione gwd-ad como el receptor.

5. En Configuración, seleccione el ID de página de la página para ir a. En

este ejemplo, es page2. También puede establecer otros ajustes como el tipo de
transición, la duración, etc.
6. Haga clic en Aceptar para guardar.

7. Puede editar este evento haciendo doble clic en él en el panel Eventos.

Repita los pasos anteriores para agregar eventos de la línea de tiempo para las
otras páginas. En la última página, configure el evento para volver a la primera
página.

El panel de Eventos debería mostrar los siguientes eventos de la línea de tiempo:

Cuando obtenga una vista previa del anuncio, comenzará con la primera página,
vaya a la página siguiente al final de la animación y continúe en bucle. A
continuación, configuraremos el anuncio para que recorra las páginas una vez y
se detenga en la página 3.

Use un contador para realizar un seguimiento del bucle

1. Agregue una variable global como contador yendo a la vista Código y

buscando window.gwd.

2. Después de la línea window.gwd, agregue el siguiente código para

inicializar el contador: var counter = 1;

3. En la última página (página 3 en este ejemplo), solo regrese a la página 1

si el contador es menor que 2, luego incremente el contador. Para hacer esto,
vaya a la vista Código, busque la acción que va a page1 y cópiela. Se verá así:
gwd.actions.gwdDoubleclick.goToPage ('gwd-ad', 'page1', 'none', 1000, 'linear',
'top');

4. En la vista Diseño, vaya a la página 3 y haga doble clic en el marcador de

evento al final de la animación para agregar otro evento de la línea de
tiempo. Seleccione Personalizado> Agregar acción personalizada en Acción.

5. Escriba un nombre de función como contar.

6. En el área de texto del código, ingrese el código para verificar si el

contador es menor que 2, pegue el código para ir a la página 1, luego incremente
el contador de esta manera: si (contador <2)
{gwd.actions.gwdDoubleclick.goToPage (' gwd-ad ',' page1 ',' none ', 1000,'
linear ',' top '); contador ++; }
7. Haga clic en Aceptar para guardar.

8. En el panel Eventos, elimine el evento de la línea de tiempo en la página3

que se remonta a la página 1 ahora que tenemos la acción personalizada con el
contador para hacerlo.

Ahora tiene el archivo de trabajo que se desplaza dos veces en las 3 páginas y se
detiene en la página 3.

Ejemplo 3: usar eventos personalizados

En este ejemplo, dibujará un elemento de entrada de texto en el escenario y
agregará un evento de 'cambio' para generar el contenido de texto en la consola
cuando se presione la tecla Intro o Tabulador.

1. Seleccione la herramienta Elemento en la barra de herramientas.

2. Haga clic en el elemento personalizado y escriba la entrada en el campo
Elemento.

3. Dibuje el elemento de entrada en el escenario y asígnele una identificación

en el panel Propiedades.

4. Haga clic derecho en el elemento de entrada en el escenario y

seleccione Agregar evento ...

5. Seleccione Ratón> haga clic como el Evento.

6. Seleccione Personalizado> Agregar acción personalizada como Acción.

7. Escriba un nombre de función como myInputChange.

8. En el área de texto del código, agregue la acción personalizada para

registrar el valor del campo de entrada en la consola cuando se
cambie: inputContent = document.getElementById ('input'). Value; console.log
(inputContent)
9. Haga clic en Aceptar para guardar.

10. Ahora reemplazaremos el evento de clic con un evento de cambio en la

vista de Código en 2 lugares:

11. Cuando vuelva a la vista Diseño, verá el evento de cambio en el panel

Eventos y podrá editarlo según sea necesario.
Ahora tiene el archivo de trabajo que genera el contenido del texto de entrada en
la ventana de la consola cuando hay un evento de cambio en el campo de entrada,
es decir, el valor de la entrada se confirma al presionar la tecla Intro o Tabulador.

2. Agregar variables globales en la vista Diseño

Esta sugerencia describe cómo agregar una variable global en la vista Diseño sin
cambiar a la vista Código.

1. Haga clic en el botón más en el panel Eventos para agregar un evento.

2. Seleccione document.body como el destino.

3. Seleccione Anuncio de Google> Anuncio inicializado como Evento.

4. Seleccione Personalizado> Agregar acción personalizada como Acción.

5. Asigne un nombre a la función, como declareVars.

6. En la sección de código, declare e inicialice sus variables con el

gwd. prefijo como gwd.myCounter = 0;

7. Cuando se inicializa el anuncio, las variables globales se pueden usar en

cualquier lugar de su archivo.
Se adjunta el ejemplo que rastrea la variable gwd.myCounter en el registro de la
consola del navegador usando un evento de línea de tiempo en el primer
fotograma clave.

Esperamos que haya disfrutado de estos consejos, y no olvide descargar los

archivos de trabajo y probar estas soluciones. Publicado por San K, Google Web
Designer Team

Trabajando con Dynamic Text en Google Web Designer

Martes 19 de diciembre de 2017

Cuando trabaje con texto dinámico, puede encontrar el problema donde el texto
termina más de lo esperado. Si tienes este problema, tenemos la solución! En esta
publicación del blog, aprenderá a controlar su texto dinámico manteniendo la
integridad de su diseño visual.

Considere el siguiente ejemplo: comenzando con un nuevo archivo en blanco,

vamos a poner el fondo en gris, agregue 2 divs blancos y coloque los elementos
de texto en la parte superior. Puede ver que el contenido del texto está vinculado
al nombre del producto en el panel Dinámico.
Cuando se previsualiza, se ve así:

Pero al agregar un texto de muestra extenso, verá este problema:

En realidad, hay dos problemas que se producen aquí: el texto del elemento
correcto se ha vuelto más pequeño y también está desbordando su contenedor.

Truncamiento y tamaño de fuente mínimo

Para solucionar ambos problemas, cambiemos a la vista Código y busquemos la
etiqueta gwd-text-helper siguiendo la etiqueta del cuerpo. Copie el código a
continuación y péguelo dentro de la etiqueta antes del corchete de cierre.

gwd-fitting-truncate = "true" gwd-min-font-size-px = "7"

Ahora, cuando se previsualice, se verá así:

Mucho mejor. El texto ahora permanece dentro de su cuadro delimitador debido
al truncamiento, pero puede ser un poco pequeño. Eso es fácil de ajustar editando
el atributo gwd-min-font-size-px-px agregado anteriormente. Actualmente está
establecido en 7, pero ajustarlo a 12 puede verse mejor, y hay 2 formas de
hacerlo, ya sea en la etiqueta gwd-text-helper para especificar una configuración
global para todo el texto en su documento, o para controlar cada texto elemento
por separado (común para titulares o títulos), agregue la etiqueta directamente al
elemento de párrafo así:

También puede evitar que el texto cambie de tamaño completamente usando

un valor de gwd-min-font-size-px igual a su tamaño inicial (16px en este caso).

Estos controles deberían resolver la mayoría de los problemas de texto dinámico,

pero hay un caso en el que puede desear un poco más de control, el caso del
centrado vertical. Vamos a duplicar los dos cuadros de texto y vincular su
contenido a los productos 2 y 3 (también he ajustado la cantidad de texto para
demostrar el problema):

Centrado verticalmente texto dinámico

También es posible que desee centrar verticalmente los campos de texto, así que
sigamos adelante y hagamos eso con los productos 2 y 3. Primero, envuelva cada
campo de texto en una nueva división haciendo clic con el botón derecho en el
elemento de párrafo y seleccionando "ajuste". También nombraremos el nuevo
div con el sufijo -ctn, y usaremos -txt para elementos de texto para ayudar a
mantener las cosas organizadas.
Haga doble clic en la nueva div. -Ctn para editar el elemento de párrafo y aplique
esta configuración en el panel de CSS:

izquierda: 0 ;

ancho: 100% ;

arriba : debe ser deseleccionado

Cambie la altura a la altura máxima: 100%

A continuación, abra la Vista de código y agregue la clase v-center a la etiqueta

de párrafo.

Repita los pasos anteriores para los dos nuevos campos de texto.
Finalmente, copie el siguiente código y péguelo al final de los estilos CSS en el
elemento "encabezado" de su documento:

p{
margin: 0px;
}

.v-center {
posición: relativo;
superior: 49%;
transformar: traducirY (-50%);
}

.v-bottom {
posición: relativo;
Top 100%;
transformar: traducirY (-100%);
}

Ahora, cuando se obtiene una vista previa, los campos de texto deben centrarse
verticalmente como se muestra a continuación:
Tenga en cuenta que la clase v-bottom anterior se puede usar en los casos en que
el texto deba alinearse en la parte inferior de su contenedor.

Con estos tres controles en la mano (truncamiento, tamaño de fuente mínimo y

posicionamiento vertical), debería poder resolver los problemas de formato de
texto dinámico más comunes. ¡Prueba estos consejos y haznos saber cómo
funcionan para ti en los comentarios!

Publicado por Kent M, Google Web Designer

Etiquetas: dinámico , texto.

Consejos de diseñador web de Google - Parte 1

Viernes 15 de diciembre de 2017

Este documento recopila los principales consejos recopilados de años de ayudar a

los usuarios en el foro y de las publicaciones del blog de Google Web Designer .
1. Usa la transformación CSS para la animación.
Problema : animación entrecortada al animar Arriba / Izquierda / Ancho / Altura.
Solución : use la transformación CSS ( traducción y escala 3D ) para la
animación en lugar de Arriba / Izquierda / Ancho / Altura.

El diseñador web de Google utiliza por defecto la transformación de CSS al crear

una animación basada en CSS porque la propiedad de transformación de CSS
proporciona una mayor velocidad de cuadros y una animación más suave. Lo que
esto significa es que cuando usa la herramienta de selección para mover un
elemento o la herramienta de transformación para cambiar su tamaño en una
animación, se convertirá de forma predeterminada en la transformación CSS
(sección de escala y traducción 3D en el panel Propiedades) (consulte
nuestra ayuda). Sin embargo, muchos usuarios cambian los campos Arriba /
Izquierda / Ancho / Alto en el panel Propiedades cuando animan elementos y
esto causará una animación entrecortada.

Para evitar la animación entrecortada, intente usar la traducción 3D X e Y para la

posición, y la escala 3D para el tamaño en el panel de Propiedades cuando anime
elementos. Si usa la herramienta de selección (o la herramienta de flecha) para
mover un elemento o la herramienta de transformación para cambiar el tamaño
de un elemento, eso se hará cargo de usted de forma predeterminada.
Nota: si la animación de una imagen es entrecortada en IE al usar la
transformación CSS, envuelva la imagen con una animación en un div haciendo
clic derecho en la imagen y seleccionando Ajustar, luego en el panel de
Propiedades del div principal, establezca la selección Rotación 3D Z a 0.01 para
solucionar el problema.

2. Pixelación cuando se utiliza escala 3D para animación.

Problema : cuando se utiliza la escala 3D para la animación, la imagen se pixela
cuando se amplía.
Solución : comience con una imagen grande que tenga el mismo tamaño que la
imagen ampliada. Agregue sus fotogramas clave de inicio y finalización. En el
fotograma clave inicial, reduzca la imagen utilizando las opciones de escala 3D
del panel Propiedades. Esto crea una animación donde la imagen crece de tamaño
sin ser pixelada.

3. Grupos para elementos reutilizables.

La agrupación de objetos crea un elemento reutilizable que se puede colocar en
documentos como "instancias", que son referencias a los elementos del
grupo. Cualquier cambio que se haga al grupo se refleja en todas las instancias de
ese grupo (consulte nuestra ayuda ).

Un ejemplo donde los grupos son útiles es un botón de CTA con un evento de
salida que existe en diferentes páginas de la creatividad. Otro beneficio es que los
eventos para los elementos en el grupo se retienen en todas las instancias del
grupo, siempre que la instancia del grupo tenga un ID asignado.
Para crear un grupo, haga clic con el botón derecho en el elemento en el
escenario y seleccione Crear grupo ...
Luego puede ver el grupo en el panel Biblioteca y arrastrarlo al escenario para
crear instancias adicionales.

Los grupos también se utilizan en las galerías deslizables y de carrusel en

creatividades dinámicas para mostrar un diseño personalizado para cada artículo
del producto en una colección. Por ejemplo, puede crear un grupo para mostrar la
imagen, el nombre, la descripción, el precio, etc. de un producto, y este diseño se
puede repetir para cada producto en la fuente. Este flujo de trabajo se describirá
en una futura publicación de blog de consejos dinámicos.
4. Hacer que un elemento aparezca / desaparezca en un momento específico durante la

animación
Problema : cómo crear una animación con un elemento que debe ocultarse /
mostrarse en ciertos fotogramas clave.
Solución : utilice la opacidad y la aceleración paso a paso / paso a
paso . También puede ver el video de YouTube sobre este tema aquí .

En este ejemplo, un div está oculto hasta la marca 3s. Luego se anima hasta 5s y
desaparece a los 5s. Para hacer esto, vamos a cambiar al modo Avanzado de la
línea de tiempo y luego seleccionar el primer fotograma clave. En el panel de
propiedades del elemento, establezca la opacidad en 0 para ocultar el elemento.
Agregue el segundo fotograma clave donde desea mostrar el elemento, en 3s en
este ejemplo, y establezca la opacidad del elemento en 1.

En este punto, si realiza una vista previa, verá que el elemento se anima de 0
opacidad a 1 porque el suavizado se establece en lineal por defecto.

Haga clic con el botón derecho en el intervalo entre los fotogramas clave y
cambie la aceleración de lineal a final de paso . En este punto, el elemento no se
mostrará hasta el segundo fotograma clave.

Agregue un tercer fotograma clave, en 5s en este ejemplo, y anime su elemento

(en este ejemplo, viaja a través del escenario).

Para volver a ocultar el elemento, agregue otro fotograma clave a 5,5 s,

establezca la opacidad en 0 y la aceleración al inicio.
Luego arrastre el fotograma clave para que esté justo al lado del fotograma clave
en 5s.

¡Ahora ha logrado activar o desactivar un elemento en un determinado fotograma

clave! Puede ver el archivo fuente o consultar nuestra publicación de blog para
utilizar otras formas de lograr el mismo efecto.

5. Cómo reemplazar una imagen sin perder los eventos o la animación.

Problema : algunos usuarios crean una nueva creatividad utilizando una
creatividad existente y desean cambiar fácilmente una imagen sin perder eventos
o animaciones.
Solución : utilice la imagen de intercambio en el menú contextual (consulte
nuestra ayuda ).
Seleccione la imagen en el escenario que desea cambiar, haga clic con el botón
derecho en ella y seleccione Cambiar imagen ...
En el cuadro de diálogo Cambiar imagen, seleccione la nueva imagen (si ya está
en la Biblioteca), o agregue una nueva imagen y selecciónela
. Haga clic en Aceptar para guardar.

6. Cómo actualizar el tamaño y la posición de un elemento sin afectar la animación.

Problema : cuando se crean creatividades de varios tamaños, muchos usuarios
pueden comenzar con un tamaño y luego construir tamaños adicionales
utilizando la primera creatividad completada en lugar de usar un diseño
responsivo. En este flujo de trabajo, es necesario actualizar el tamaño y la
posición del elemento en la nueva creatividad mientras se mantiene la animación.
Solución : use la transformación CSS para la animación (solución # 1 en esta
publicación), luego actualice las propiedades Superior, Izquierda, Ancho y Alto
en el primer fotograma clave en el modo Avanzado para actualizar la posición y
el tamaño del elemento sin afectar la animación.
Al usar la animación, la mejor práctica es animar usando la transformación CSS
para evitar la animación entrecortada. Además de la ventaja de rendimiento,
también puede actualizar rápidamente el tamaño y / o la posición del elemento
sin tener que actualizar todos los fotogramas clave.

Por ejemplo, digamos que tiene un elemento de 100x100px en el primer

fotograma clave como este:

En el segundo fotograma clave, se mueve por la pantalla y se reduce a la mitad

de su tamaño de esta manera:
Ahora digamos que estás creando una creatividad más grande y el elemento debe
ser 200x200px. Simplemente puede seleccionar el primer fotograma clave y
actualizar las propiedades de Ancho y Alto. Como el Ancho y la Altura no se
usan para animar el elemento, lo que cambie en el primer fotograma clave se
propagará por todos los fotogramas clave posteriores.

El elemento ahora será de 200x200 px y viajará a través de la pantalla en 200 px

con su tamaño reducido a la mitad:

7. Cómo hacer un bucle infinito en la Galería Swipeable

Problema : cuando se establece la reproducción automática, la Galería deslizable
solo se reproduce automáticamente hasta el último cuadro y luego regresa al
primer cuadro.
Solución : reproducir automáticamente la Galería deslizable girando una vez
cuando finaliza la reproducción automática, y configurando el tiempo de rotación
y la duración de la reproducción automática para un bucle suave.

En este ejemplo, hay 3 imágenes, la reproducción automática se establece en el

panel Propiedades y la rotación de la reproducción automática se establece en
3000 en las propiedades avanzadas de la Galería deslizable. Esto significa que la
galería se reproduce automáticamente del primer al último fotograma en 3
segundos.
Cuando realice una vista previa, verá que la Galería deslizable se reproduce
automáticamente una vez, luego vuelve al primer cuadro y se detiene. Para
reproducirlo automáticamente de manera infinita, agregue un evento finalizado
de reproducción automática para rotar una vez hacia adelante.

1. Haga clic con el botón derecho en la Galería de Swipeable y

seleccione Agregar evento .

2. Seleccione Galería deslizable> La reproducción automática terminó como

el evento.

3. Seleccione Galería deslizable> Girar una vez como acción.

4. Seleccione la ID de la Galería Swipeable como el Receptor.

5. En Configuración, configure el Tiempo de rotación para que sea igual a la

duración de la reproducción automática. En este ejemplo, esto es 3000 con
dirección hacia adelante.
Haga clic en Aceptar para guardar.
Ahora tiene un archivo de trabajo que recorre infinitamente la Galería de
Swipeable.

Esperamos que haya disfrutado de estos consejos, y no olvide descargar los

archivos de trabajo y probar estas soluciones.
Publicado por San K, Google Web Designer Team

Etiquetas: 3D , animación , css , galería , grupos , bucles

Creación de salidas personalizadas para creatividades de

remarketing dinámico
Lunes 3 de abril de 2017
El remarketing dinámico es una excelente manera de mejorar el rendimiento de
su publicidad, especialmente si su objetivo es vender más productos. Sin
embargo, trabajar con una creatividad dinámica puede ser complicado. Algunos
de los valores requeridos por su creatividad, como el texto de la llamada a la
acción (CTA), los nombres de los productos, las URL de salida, etc., no se
conocen de antemano y provienen de un "feed" del producto. El cuadro de
diálogo de propiedades dinámicas de Google Web Designer puede ayudarlo a
vincular dichos valores con los elementos de su creatividad, pero ¿qué sucede si
desea procesar estos valores en un proceso posterior antes de vincularlos a su
creatividad?

En este artículo, abordaremos uno de estos casos: agregar una función de salida
personalizada a su creatividad de remarketing dinámico, que le permite
postprocesar la URL de salida antes de salir de ella.

⚠ Cuando trabaje con una URL, tenga especial cuidado de generar una URL válida y
tenga en cuenta que algunos navegadores tienen una longitud de URL máxima
admitida.

Supongamos que ha creado la creatividad de seis productos a continuación para

el remarketing dinámico en DoubleClick Bid Manager.
Comencemos agregando una salida personalizada para el producto 0:

Paso 1: si corresponde, elimine los enlaces dinámicos para la "URL de anulación

de salida" dentro del componente Área de tap del producto 0.
 ⚠ Sin este cambio, hacer clic en su creatividad puede llevar a más de una salida.

Paso 2: Seleccione el área de tap para el producto 0 (el primer producto).

Paso 3: agregue un nuevo evento para el área del grifo haciendo clic en el botón
"+" en el panel Eventos.
Paso 4: Seleccione Tap Area> Touch / Click como el evento.

Paso 5: Para la acción, seleccione Personalizar> Agregar acción personalizada.

Paso 6: Agregue un nombre de función (por ejemplo, mycustomexit0) y luego
pegue el siguiente fragmento de código en el área de texto. Reemplace el
comentario con la lógica para su posprocesamiento personalizado, luego haga
clic en Aceptar.

var exitURL = dynamicContent.Product_0_url

// El post-procesamiento personalizado ocurre aquí
Enabler.dynamicExit ("exit", exitURL, "0")
 💡 Use Enabler.dynamicExit () en lugar del tradicional Enabler.exitOverride () para
salidas de creatividades dinámicas y pase el índice del producto como tercer
parámetro. Esto ayuda al motor de optimización de Google a comprender en qué
producto se hizo clic y nos permite mejorar aún más el rendimiento de las
creatividades dinámicas.

Repita los pasos anteriores para los otros cinco productos en la creatividad,
cambiando el índice en consecuencia, por ejemplo, para el segundo producto, use
el índice 1, y así sucesivamente.

Para probar sus cambios, siga los pasos en el artículo del centro de ayuda de
lacreatividad dinámica de Bid Manager para cargar su creatividad en Bid
Manager. Luego, obtenga una vista previa de la creatividad y haga clic en los
productos para verificar que sus salidas personalizadas estén funcionando como
se esperaba.

¡Crear salidas personalizadas no es tan complicado después de todo! Acabamos

de mostrarle cómo su creatividad dinámica puede usar salidas personalizadas y
enviar información sobre clics de nivel de producto. Si necesita un
procesamiento posterior de las URL de salida, pruebe estos pasos con sus
creatividades y háganos saber lo que piensa en los comentarios a
continuación. Publicado por Manikandan, Software Engineer

Etiquetas: CTA , DoubleClick Bid Manager , dynamic , exit , google web designer

Explorando texto en el diseñador web de Google

Lunes 13 de marzo de 2017

En la publicación del blog de hoy, le mostraremos cómo administrar la apariencia

del texto en todo el documento de Google Web Designer. Comenzaremos con
cambios simples, como la familia de fuentes, el peso del texto, el tamaño o el
color. Luego, le mostraremos cómo hacer que un nuevo elemento de texto se vea
como uno existente y cómo definir los estilos predeterminados para que pueda
reutilizarlos fácilmente.

Lee mas "

Etiquetas: diseñador web google , HTML5 , texto.

Se relanza la formación de Google Web Designer.

Jueves 17 de noviembre de 2016

La capacitación de Google Web Designer se reinicia : Estamos encantados de

volver a lanzar nuestra capacitación principal para Google Web Designer,
titulada "Comenzar con Google Web Designer". Este nuevo programa Learning
Path and Achievement se lanzó exclusivamente en Academy for Ads, el centro
de Google para la capacitación en publicidad a pedido.

Tome la capacitación de hoy para conocer los pormenores de la creación de

anuncios HTML5 con la herramienta. Bloquee un par de horas para tomar el
camino de aprendizaje completo para desarrollar la experiencia que necesita para
usar Google Web Designer al máximo.
Publicado por Jasmine Rogers, en nombre del equipo de Academy for Ads.

Etiquetas: pantalla , DoubleClick Studio , diseñador web de google , HTML5

Nuevas funciones de usabilidad para el diseñador web de

Google.
Miércoles 16 de noviembre de 2016

Nos complace presentar varias mejoras nuevas para hacer que el diseñador web
de Google sea más rápido y más fácil de usar. Ya sea que esté copiando y
pegando proyectos o arrastrando y soltando capas en la línea de tiempo, la
herramienta le permite trabajar de la forma que necesita. Hoy, estamos lanzando
las siguientes actualizaciones:

Mejoras en la línea de tiempo:

 Modo avanzado - Zoom: los usuarios ahora pueden acercar y alejar la
línea de tiempo permitiendo una ubicación más precisa de los fotogramas clave.

 Selección de múltiples fotogramas clave / miniaturas: seleccione o elimine

fácilmente todos los fotogramas clave (en el modo Avanzado) o miniaturas (en el
Modo rápido) en una capa a la vez.

 Animar propiedades en la primera miniatura: el Modo rápido ahora

permite editar el primer fotograma clave y conservar las otras propiedades de
fotograma clave.

 Arrastre para ocultar / bloquear capas: ahora es posible arrastrar y

seleccionar los iconos de ocultar / bloquear en las capas en lugar de hacer clic en
cada icono uno por uno. Y los usuarios aún podrán hacer clic en cada capa para
bloquear u ocultar, si lo desea.
 Nuevas funciones de aceleración: Hemos agregado dos nuevas funciones
de simplificación para la animación: step-start y step-end. Usando estas nuevas
funciones para valores de propiedad animados, los usuarios obtendrán más
control sobre sus transiciones de animación.

Nuevas funciones de aceleración para las animaciones en Google Web Designer.

Copiar / pegar documentos

Cualquier elemento que pueda copiarse en el mismo documento ahora puede
copiarse a otros documentos, incluidos activos y grupos. Además, si los activos u
otros datos entran en conflicto, se abrirá un cuadro de diálogo para pedirle que
elija manualmente la resolución.

Panel de preferencias
Personalice Google Web Designer según sus preferencias de estilo y flujo de
trabajo en una ubicación central. Por ejemplo, puede establecer una serie de
valores predeterminados de Vista de código, incluido el tema de color y el mapa
de teclas preferido.

Soporte de biblioteca de JavaScript

Los usuarios de DoubleClick Studio ahora pueden importar fácilmente la
Biblioteca JS de Greensock para las creatividades creadas en Google Web
Designer. También puede agregar una variedad de complementos que incluyen
TweenLite, TweenMax y complementos de texto para ayudarlo a construir sus
creatividades.
 Soporte de biblioteca de JavaScript en Google Web Designer

Hoy, también lanzamos una nueva ruta de aprendizaje de Google Web Designer
en Academy for Ads . Este recurso puede ayudarlo a conocer los entresijos del
Diseñador web de Google en módulos rápidos de cinco minutos o dedicar más
tiempo a trabajar a través de la ruta de aprendizaje completa.
¿Listo para comenzar? Echa un vistazo a nuestra galería de anuncios de Google
Web Designer para inspirarte. Si ya ha descargado Google Web Designer, se
actualizará automáticamente para reflejar las nuevas funciones enumeradas
anteriormente. Si aún no ha descargado la herramienta, puede descargarla gratis
aquí .

Publicado por Jasmine Rogers, Gerente de Programa, Diseñador Web de Google

Componente Galería en carrusel

Esta función no está disponible para los anuncios AMPHTML. Utilice el componente de carrusel de
AMP en su lugar.

El componente Galería en carrusel crea una galería de imágenes deslizables que giran de modo
similar a un carrusel. Puede modificar las propiedades del componente para crear varias
experiencias 3D y varios tipos de carrusel. También puede usar este componente en anuncios
dinámicos.

Elegir la galería adecuada

Google Web Designer tiene tres componentes de galería distintos:
  Galería 360º: La galería 360° está optimizada para mostrar un objeto desde todos los
ángulos, ya que se puede deslizar hacia adelante o hacia atrás para girarlo. La galería 360°
tiene pocas opciones y no puede mostrar elementos de navegación o grupos.
 Galería deslizable: la galería deslizable tiene un diseño sencillo y claro. Permite pasar
imágenes o grupos en sentido vertical u horizontal.
 Galería en carrusel: la galería en carrusel es similar a la deslizable, pero muestra las
imágenes adyacentes en tres dimensiones, como si estuvieran en un expositor giratorio.

Para utilizar el componente Galería en carrusel en su

proyecto, siga estos pasos:
1. Abra el panel Componentes y, luego, la carpeta Galerías.
2. Arrastre el componente Galería en carrusel a la escena.
3. En la sección de propiedades del componente Galería en carrusel, que se encuentra en el
panel Propiedades, asigne un nombre al componente.
4. Añada un conjunto de imágenes o de grupos. Utilice grupos para mostrar elementos que no
sean imágenes o para mostrar varios elementos en un solo fotograma.
 Para añadir imágenes a la galería, utilice uno de los siguientes métodos:
 En la sección de propiedades del componente Galería en carrusel, que se encuentra
en el panel Propiedades, haga clic en el botón Seleccionar imágenes de la
galería del campo Imágenes. Luego, haga clic en el botón Elegir imágenes para
buscar archivos de imagen o arrástrelos directamente al cuadro de diálogo.
 En la sección de propiedades del componente Galería en carrusel, que se encuentra
en el panel Propiedades, añada las URL de sus imágenes al campo Imágenes,
separadas por comas.
 Para añadir grupos a la galería:
 En la sección de propiedades del componente Galería en carrusel, que se encuentra
en el panel Propiedades, añada una lista de nombres de grupo en el campo Grupos,
separados por comas.
5. También puede ajustar otras propiedades del componente (a continuación se explica cómo
hacerlo).

Para reordenar o quitar imágenes de la galería, siga estos pasos:

1. En la sección de propiedades del componente Galería en carrusel, que se encuentra en el

panel Propiedades, haga clic en el botón Seleccionar imágenes de la galería .
2. Arrastre una imagen a su nueva posición para reordenarla o coloque el cursor sobre una
imagen y haga clic en el botón Eliminar para quitarla de la galería.
3. Haga clic en Aceptar.

Propiedades
Propiedad Descripción
Nombre Establece el nombre del componente Galería en carrusel.
Imágenes Le permite seleccionar las imágenes que se usan en la galería. Puede
estar vinculado con datos dinámicos.
Grupos Lista de grupos delimitada por comas para usarla en la galería. Puede
estar vinculado con datos dinámicos.
Transición El tiempo (en milisegundos) de transición entre imágenes.
Fotograma de El número de la imagen que desea mostrar al inicio.
inicio
Reproducción Con esta opción marcada, se reproducen las imágenes de la galería de forma
automática automática.
Incluir Con esta opción marcada, se incluyen iconos de navegación para desplazarse a
navegación través de la galería.
Usar miniaturas Si la casilla está marcada junto con "Incluir navegación", se muestran imágenes en
miniatura en lugar de iconos para la navegación.

Color de Establece el color de resaltado de la imagen de navegación.

resaltado
Escalado Determina cómo se muestran imágenes de diferentes tamaños dentro del tamaño
fijo del fotograma.

 Cambiar el tamaño de la imagen para ajustar: se cambia el tamaño de la

imagen proporcionalmente según sea necesario para que se ajuste al
fotograma, pero no se recorta. Se añadirá relleno si la proporción de la
imagen y la del fotograma son distintas.
 Recortar imagen para rellenar: se cambia el tamaño de la imagen para que
cubra completamente el fotograma. Para ello, se recorta según sea
necesario si la proporción del fotograma y la de la imagen son distintas.
 Ninguno: la imagen se muestra en su tamaño original, centrada en el
fotograma. Si la imagen es más pequeña que el fotograma, el espacio extra
se rellenará con transparencia. Si es mayor, se recortará.
 Estirar imagen para rellenar: se cambia el tamaño de la imagen y se estira
en caso de ser necesario para que coincida con las dimensiones del
fotograma, pero no se recorta.

Propiedades avanzadas

Para mostrar las propiedades avanzadas del componente, vaya al panel Propiedades y haga clic en el
icono de ampliar situado junto a Propiedades avanzadas.

Anchura del fotograma
Altura del fotograma
Rotación del fotograma
contiguo
Separación del fotograma
contiguo
Distancia vertical del
fotograma contiguo
Escala del fotograma
contiguo
La anchura (en píxeles) del marco de la imagen dentro de la galería.
La altura (en píxeles) del marco de la imagen dentro de la galería.
El valor de rotación que se aplica a los fotogramas contiguos.
Valor de separación entre los fotogramas.
Indica la altura con que se muestra el fotograma contiguo.
La escala comparativa respecto a la imagen contigua.

Direcciones URL de salida Una lista de direcciones URL separadas por comas que se corresponden
con cada uno de los fotogramas de la galería. Puede estar vinculado con
datos dinámicos.
Mostrar reflejo (Webkit) Si esta casilla está marcada, se muestra un reflejo de la imagen. Este
efecto solo es compatible con los navegadores WebKit.
Pausar la reproducción de Si esta casilla está marcada, se pone en pausa el audio o el vídeo que se
archivos multimedia al está reproduciendo en el fotograma actual cuando se cambia de
abandonar el fotograma fotograma. De este modo, se evita tener contenido indeseado
reproduciéndose en segundo plano.
Reanudar la reproducción deSi esta casilla está marcada, se reanuda el audio o el vídeo que estaba en
archivos multimedia al pausa al pasar al fotograma siguiente. De este modo, se evita tener
acceder al fotograma contenido indeseado reproduciéndose en segundo plano.

Eventos y acciones
Eventos que envía el componente Galería en carrusel

Acciones que realiza el componente Galería en carrusel

Obtenga información sobre cómo configurar eventos.

Vista previa
No se puede obtener una vista previa de este componente dentro de la interfaz de
Google Web Designer. Para ver cómo funciona, obtenga una vista previa del documento en su

navegador haciendo clic en el botón Vista previa , situado en la esquina superior

derecha

https://support.google.com/webdesigner/answer/3195037?hl=es