La Copa Mundial es un barómetro ideal para saber cómo se usa la tecnología en todo el mundo. Hace cuatro años, presenciamos la primera Copa Mundial de la era de los medios sociales. Este verano, los aficionados usaban sus dispositivos móviles y sus tablets para interactuar entre sí y con los partidos de fútbol. Del mismo modo que los hábitos de la audiencia están cambiando, las tácticas de publicidad también evolucionan para mantenerse al día. Phenomenal Shot de Nike es un ejemplo perfecto: una campaña en tiempo real con toda la acción que no habría sido posible hace cuatro años.

Una recopilación de momentos inolvidables en tiempo real

Sucede cada cuatro años. Los aficionados de todo el mundo celebran a la vez los increíbles momentos que van aconteciendo durante la Copa Mundial.

Como parte de la última colaboración con Google Art Copy & Code, Nike se asoció con Grow, Wieden+Kennedy, Mindshare y Goo Technologies para crear una nueva forma de llevar esa emoción de los eventos deportivos en directo a la Web.

La campaña Phenomenal Shot de Nike permitió que aficionados de todo el mundo vieran, recopilaran y compartieran momentos increíbles de los futbolistas de Nike unos segundos después de las jugadas. Los anuncios de display que celebraban estos momentos se mostraron en la Red de Display de Google a una velocidad casi instantánea en todo el mundo.

La experiencia multimedia WebGL permitía interactuar con los futbolistas mediante funciones propias de los dispositivos móviles y los navegadores. Los aficionados podían girar 360 grados alrededor de los jugadores, desplazando e inclinando sus teléfonos para moverse alrededor de ellos en 3D con el fin de crear la foto perfecta y compartirla.

Siempre se aprende cuando haces algo por primera vez. Te vamos a contar cómo ha sido trabajar con una marca como Nike, lo que hemos aprendido y lo que hicimos.

Desafío 1: prepararse para trabajar en tiempo real

Muchos futbolistas de alto nivel celebran sus grandes logros de forma característica: corriendo con los brazos abiertos, deslizándose con las rodillas o señalando al cielo. Estos gestos fueron solo algunos de los muchos efectos visuales que necesitábamos para crear a nuestros futbolistas de Nike, y que luego incorporamos a la experiencia. El reto estaba en mostrar estos efectos visuales a todo el mundo antes de que se esfumara la emoción del momento.

Como no podíamos predecir cuándo se iba a marcar un gol ni quién iba a hacerlo, preparamos y perfeccionamos el sistema antes de lanzar la campaña. De este modo, podríamos reaccionar rápidamente en cuanto se vivieran estos momentos durante el torneo.

Cómo lo hicimos: creamos una creatividad dinámica con DoubleClick Studio. Con una plantilla de HTML5, creamos y gestionamos un anuncio flexible, en lugar de cientos de anuncios personalizados, que pudiera aparecer en distintas pantallas. Esta estrategia nos permitió simplificar el proceso de escalado en cuanto se producía un gran momento.

A continuación, mostramos creatividades dinámicas a través de DoubleClick Campaign Manager en la Red de Display de Google, creando anuncios para todo el mundo en tiempo real con los escenarios donde tuvieron lugar esos momentos.

Para publicar distintas variaciones de un anuncio en 15 idiomas distintos, creamos una plantilla con una hoja de cálculo de Google que usábamos como feed dinámico para generar los anuncios. Una vez que el feed estuviera listo, podríamos generar los anuncios de forma rápida actualizando la hoja de cálculo, lo que reduce el esfuerzo y la velocidad con que se publican los anuncios en tiempo real. La hoja de cálculo era un método eficaz y, a la vez, sencillo, que permitía la actualización de los anuncios sin necesidad de personal técnico ni especialistas en creatividades.

Solo usamos un código base para generar los bloques de anuncios. Grunt, una biblioteca JavaScript, nos ayudó a acelerar la producción y obtener una vista previa de los anuncios.

Qué hemos aprendido: prepararse para los momentos en directo es vital para el éxito. Era fundamental que todos los colaboradores usaran el sistema más eficiente desde las primeras fases de producción. De esta forma, pudimos prepararnos tanto para lo esperado como para lo inesperado. Y aunque tal preparación era fundamental, la ejecución podía simplificarse controlándolo todo a través de una sola hoja de cálculo y una sola plantilla de anuncios HTML5.

Desafío 2: crear una experiencia visual impresionante para dispositivos móviles

Debido al rendimiento de los dispositivos y a las limitaciones por el tamaño de los archivos, puede ser complicado crear experiencias visuales multimedia y en 3D en un entorno para móviles, ya que, con frecuencia, requieren otra aplicación. Para estas cuestiones, recurrimos a la tecnología del navegador Chrome para móviles, que admite gráficos complejos, así como a la experiencia de algunos socios de la agencia con mucho talento.

Cómo lo hicimos: empezamos con la animación corta "The Last Game", que crearon Wieden+Kennedy y Passion Pictures para Nike. Goo Technologies permitió convertir las creatividades en WebGL usando el motor Goo Create Engine para que los usuarios pudieran interactuar con los jugadores.

Sabíamos que WebGL ofrecería esa experiencia interactiva que buscábamos, pero la tecnología es todavía relativamente nueva en los smartphones. Teníamos que convertir las creatividades en 3D del corto de animación en algo con lo que pudiéramos trabajar. Aunque hay un montón de motores disponibles para eso, elegimos Goo porque nos quedamos impresionados con el rendimiento y la calidad visual de Pearl Boy. Además, el motor Goo Create Engine es conocido por su eficaz control de memoria y sus optimizaciones específicas para móviles.

El equipo de Goo también optimizó las texturas y la iluminación para que fueran lo más parecidas posible a las imágenes en 3D. De este modo, se consiguió que los personajes parecieran sacados de la misma animación. La codificación predeterminada de estas partes permitió un tiempo de carga rápido y evitó el procesamiento dinámico de la iluminación. A continuación, el equipo de Grow usó ese contenido para crear la experiencia web.

Qué hemos aprendido: la optimización de las creatividades 3D para WebGL antes de la Copa Mundial hizo que pudiéramos crear una experiencia visual impresionante y rápida para los dispositivos móviles. De este modo, cada vez que se producía un momento memorable, solo teníamos que situar y aplicar texturas a los modelos en vez de reconstruir toda una escena.

Desafío 3: la estandarización de la experiencia para dispositivos móviles

Al convertir los personajes a WebGL, tuvimos que asegurarnos de que la experiencia funcionara de manera eficaz en varios dispositivos.

Cómo lo hicimos: para garantizar que funcionara en todos los dispositivos, recopilamos datos de varios fabricantes de hardware y creamos una herramienta personalizada. Tuvimos que normalizar sensores de dispositivo tales como el giroscopio, el acelerómetro y la brújula para que la cámara 3D reaccionara de la misma manera cuando los aficionados se desplazaran 360 grados alrededor de un futbolista con cualquier dispositivo.

Sin embargo, la compatibilidad inmediata con IMU para aplicaciones web no es universal en estos momentos, por lo que creamos una biblioteca JavaScript que detectara estas variaciones de dispositivo y proporcionara valores normalizados. A continuación, usamos un algoritmo de suavizado exponencial para garantizar una experiencia fluida cuando los usuarios hicieran el movimiento de desplazamiento y de inclinación con sus teléfonos. Creamos una experiencia sin complicaciones en todos los dispositivos con las API de movimiento de dispositivos y de orientación de dispositivos en HTML5.

Qué hemos aprendido: decidimos no crear una experiencia para móviles que solo aprovechara la capacidad y el rendimiento mínimos de los dispositivos. En su lugar, descubrimos que, al crear bibliotecas personalizadas orientadas a dispositivos específicos, podíamos garantizar que, independientemente del dispositivo, la experiencia del usuario respetaría nuestra visión original.

Desafío 4: crear una experiencia en 3D para todos

Debido a que WebGL es una tecnología nueva que aún no está disponible en todos los sistemas operativos para móviles, teníamos que encontrar una solución creativa para simular la experiencia 3D utilizando creatividades en 2D.

Cómo lo hicimos: utilizamos secuencias de imágenes para hacer que el 2D pareciera 3D en los sitios sin WebGL. Pero en lugar de crear un libro animado, asociamos los controles direccionales de la animación a los datos de retroalimentación del sensor del dispositivo para que los usuarios pudieran controlar la animación moviendo sus teléfonos.

Con el procesador de WebGL, diseñado para ofrecer una experiencia 3D completa, creamos una herramienta que extrae las imágenes de la escena real en WebGL. Tomamos instantáneas del entorno WebGL desde todos los ángulos posibles, lo que nos permitió recrear la experiencia en un mundo 2D. La exportación final fue de 100 imágenes por jugador, que en conjunto simulan una experiencia 3D cuando los aficionados se desplazan alrededor de un personaje con sus teléfonos.

Mantuvimos una base de código con muy poca variación entre las experiencias en 2D y en 3D. Los controles de sensores, las opciones de compartir con las plataformas sociales y otras características funcionaron sin ninguna o con una mínima modificación en el código. La experiencia era similar en dispositivos con y sin WebGL.

Qué hemos aprendido: mediante la creación de una herramienta para capturar creatividades en 2D a partir de imágenes en 3D, pudimos simplificar el funcionamiento de nuestro sistema y conseguir una mayor compatibilidad con los dispositivos sin que la experiencia del usuario se viera afectada.

Conclusión

Nuestros anuncios celebraron en tiempo real las fantásticas jugadas de la Copa Mundial, como cuando Neymar Jr. de Brasil marcó dos goles en la primera mitad del partido contra Camerún. En tan solo unas semanas, alrededor de 2,2 millones de personas usaron Phenomenal Shot para acceder y personalizar el contenido de Nike. Si bien los anuncios se publicaron en 15 países, la naturaleza social y compartible de la experiencia hizo que 200 países se sumaran a ella. Mientras WebGL y otras tecnologías mejoren y estén disponibles en cada vez más dispositivos, seguiremos derribando barreras. Para nosotros, esta impresionante campaña en tiempo real solo ha sido el comienzo.

Puedes escuchar a los creadores de Phenomenal Shot en el vídeo siguiente o interactuar con la campaña aquí.