Episodio 7: ¡Pequeños y cachondos hacks de JavaScript!

En el Episodio 7 de ''The Conversion Hacker Podcast'', Jörg Dennis Krüger, el hacker de conversiones más importante de Alemania, te explica cómo puedes realizar pequeñas pero eficaces optimizaciones en tu tienda online de forma interna a través de JavaScript, ¡sin necesidad de tener conocimientos profundos de programación!

TRANSCRIPCIÓN DE ESTE EPISODIO DEL PODCAST

Mi corazón late más rápido desde hace años. Pienso en ti día y noche. No sé si estoy despierto, soñando, tumbado o de pie... Miro enamorado tus líneas, contemplo tus funciones. No quiero dejarte nunca, ya te poseo por completo.

Bienvenido al Podcast de Conversion Hacking. Mi nombre es Jörg Dennis Krüger y como mi director de programa acaba de decir correctamente: Sí, soy el Hacker de la Conversión y hoy he empezado con un pequeño poema, en este podcast, una pequeña interpretación de una oda al amor.

He ajustado algunas palabras y bueno, ¿ya adivinaron a quién dirigí esta oda? A mi secreto, desde hace años, primero odio luego amor, odio-amor y cada vez más: a JavaScript, por supuesto.

He llegado a amar JavaScript. JavaScript, por supuesto, solía ser como: "Oh Dios mío", y durante un tiempo fue como: "Oh Dios, oh Dios, oh Dios, desactivemos JavaScript en todos los navegadores", y: "nadie necesita eso de todos modos" y qué sé yo: "Simplemente lo arruina todo". Microsoft de alguna manera había desarrollado su propio JavaScript y lala lala, pero la Internet moderna sin JavaScript es inimaginable.

JavaScript funciona de maravilla para manipular HTML, para mapear funciones, para validar formularios, no sé. Incluso para mostrar interfaces enteras. Sin JavaScript, Internet simplemente tendría un aspecto muy diferente del que tiene. Y en consecuencia deberíamos usar JavaScript para nosotros. Y jaja. Ya se nota que este episodio es un poco más técnico.

Pero tengo que decir; no, no soy un codificador, no soy un programador, no estoy tan metido en ello. Pero JavaScript es tan grande, un poco como PHP en algunos rincones. Puedes conseguir mucho con un poco de conocimiento, un poco de copiar y pegar y un poco de pensamiento, sin ser un programador empedernido. O también puedes encontrar desarrolladores relativamente baratos que pueden desarrollar rápidamente un JavaScript para cambiar algo en la página.

Y esto me lleva a un punto emocionante, por qué me gusta tanto JavaScript. Para mí, es la solución a todos los departamentos de TI, todos los desarrolladores de plantillas, todas las agencias de tiendas y así sucesivamente. Y desde que el Google Tag Manager ha existido y está siendo utilizado tan ampliamente, mi amor por JavaScript se ha reavivado, porque sólo puede lanzar JavaScript en la página tan maravillosamente ahora. 

En el pasado, primero teníamos que crear la plantilla o tal vez teníamos que poner una herramienta de prueba en la página y luego sólo teníamos que entregar una variante, era un poco una solución tras otra. Hoy en día tenemos el gestor de etiquetas, podemos simplemente configurar un disparador maravilloso, lanzar el JavaScript y ya está. ¿Y qué puede hacer ese JavaScript?

Sí, ¡prácticamente todo! Porque podemos usarlo para reconstruir la página maravillosamente.

Si ya tenemos jQuery en la página y muchas páginas trabajan con jQuery de todas formas, así que la librería ya está cargada, podemos trabajar mucho más fácilmente porque no tenemos que usar JavaScript plano, sino porque tenemos jQuery disponible como librería, lo que nos quita mucho trabajo de encima. Y luego movemos elementos, reformateamos textos, escalamos imágenes, ocultamos elementos, mostramos elementos, tal vez reconstruimos toda la navegación, mostramos elementos de confianza.

Sí, ¡todo! Podemos influir en todo, podemos influir en CSS a través de JavaScript, en el contenido de la página, en las estructuras HTML y, por supuesto, incluso en las funciones. Y podemos cambiar cosas muy, muy rápidamente sin tener que mirar más profundamente en la plantilla o el código. Y eso empieza con cosas muy pequeñas. Hace algún tiempo, el propietario de una tienda estuvo a punto de discutir con su agencia por qué no se podía hacer clic en los teasers de la página de inicio. Entonces le dijeron: "Bueno, eso es sólo Shopware, esos son los mundos de compras.

Y con los mundos de compras, sólo podemos hacer que los botones sean clicables, pero no las imágenes enteras". Pero si tengo teasers tan anchos como la pantalla en la página de inicio y tengo un pequeño botón en él, pero todo el teaser no es clicable, eso es una mierda, por supuesto. Pero hacer que algo así sea clicable a través de JavaScript es realmente cuestión de cinco minutos y entonces no tienes que discutirlo con la agencia, si realmente conocen Shopware o qué, sino que simplemente le pones el disparador correspondiente a través de JavaScript y ya está y si te lo curras un poco más, incluso puedes programarlo de forma que dinámicamente el JavaScript siempre coja el enlace desde el shopware, que el JavaScript siempre tome el enlace del botón, luego lo aplique a la imagen que está a su alrededor y ya está, entonces ni siquiera necesitas adaptar el JavaScript para adaptar nada al teaser, el JavaScript entonces obtiene los enlaces de forma completamente automática.

No es ciencia espacial, es sólo un poco de JavaScript. Y puedes ahorrar mucho dinero con él. Y sobre todo, ¡puedes ganar mucho dinero con él! Porque los resultados son mucho más rápidos. Es por eso que JavaScript es realmente uno de mis grandes amores en el hacking de conversión, en la optimización de conversión cada vez más, porque simplemente funciona para cambiar rápidamente algo y cosas tan pequeñas, como hacer algo clicable aquí, u ocultar un elemento aquí, es de otra manera a veces un gran esfuerzo, una agencia cobra tal vez dos, tres, cuatro, cinco horas para ello, pero necesita una semana hasta que entonces tiene tiempo para ponerlo en práctica, entonces se pierde una semana y 500 euros se han ido.

Y usted podría simplemente hacerlo en JavaScript, dentro de, digamos con la garantía de calidad y así sucesivamente, dos horas y luego es sólo mucho, mucho más barato y usted puede o bien construir el conocimiento de JavaScript internamente, tal vez también hay alguien en algún lugar que tiene un poco de una idea al respecto, porque como he dicho, no tenemos que ser muy orientado a objetos aquí, Como he dicho, no tenemos que ser muy orientado a objetos, no sé qué en el camino, pero sólo tenemos que hacer cosas muy simples, que a menudo puede simplemente copiar juntos, y el gestor de etiquetas tiene una gran función de vista previa, porque puedo simplemente establecer la etiqueta en el gestor de etiquetas, a continuación, vaya a la vista previa en el gestor de etiquetas y luego ver si funciona o no.

Y luego lo cambio en el Tag Manager, hago clic en Update Preview, lo vuelvo a mirar y puedo depurarlo maravillosamente hasta que se ejecute. No es tan complicado. Y entonces termino en un santiamén, en línea. Y, por supuesto, si tengo una herramienta de pruebas, también puedo usarla, y muchas herramientas de pruebas tienen un editor de "lo que ves es lo que obtienes" de apuntar y hacer clic o trallala, así que ni siquiera necesito saber JavaScript, simplemente hago clic junto.

Por supuesto, esto tiene sus ventajas y desventajas y con algunas herramientas, algunas herramientas de pruebas A / B, también puedo hacer clic en algo juntos y luego copiarlo en el gestor de etiquetas, que también se puede hacer. Por supuesto, hay trampas. Si ya hay una gran cantidad de JavaScript en la página y por lo tanto la página sólo se construye con un largo retraso porque hay tal vez Ajax en ella, entonces la página sólo se carga más tarde, entonces tengo que interceptar esto con mi JavaScript en consecuencia. Eso es a veces un poco difícil, entonces necesito algunas devoluciones de llamada y así sucesivamente, pero entonces tal vez puedo cambiar CSS. También se puede lograr mucho con CSS y escribo CSS una vez en la parte superior de la página y se aplica automáticamente a todos los elementos que más tarde utilizan estas clases CSS o IDs o no sé qué.

Entonces no puedo golpear y cambiar los elementos individuales exactamente con JavaScript, pero escribo en la parte superior: "Cada celda de una tabla, o cada elemento llamado tal y tal, por favor aplique estos atributos" y eso es todo. Puedo hacer bastante con esto en lo que se refiere al diseño. Ahora no puedo poner enlaces alrededor, todavía tienes que mirar un poco, pero como he dicho, la mayoría de las veces la solución es muy, muy simple. A veces no funciona, por supuesto las soluciones alternativas no siempre funcionan, no es la solución del 1000 por ciento que siempre funciona, pero es la solución del 90 por ciento que me da resultados muy rápidamente.

Y por eso siempre debería preguntarme inmediatamente cuando estoy pensando en cualquier cambio, no: "¿Cuánto tardará la agencia en implementar esto y cuánto tiempo lleva y lalala?". La primera pregunta debería ser: "¿Puedo implementar esto mediante JavaScript? Si tengo suficiente tráfico, es más o menos la misma respuesta a "¿Puedo hacer mi test A/B?". Porque es lo mismo, tengo que implementar el test A/B también con JavaScript, pero aunque no tenga suficiente tráfico, puedo usar esta tecnología para implementar rápidamente mis resultados, para simplemente probarlo; ¿funciona? Recoger opiniones. Y si tengo suficiente tráfico, entonces simplemente hago un test A/B, pero hablaremos de eso en otro episodio, qué significa exactamente test A/B y demás, porque los test A/B solían ser lo más para mí, hoy tengo que decir que soy mucho más escéptico al respecto, porque los test A/B son geniales, pero es increíblemente difícil hacer buenos test A/B, realmente necesito tráfico para eso, necesito un poco de tiempo.

Necesito un poco de resistencia para configurarlo todo correctamente y necesito los conocimientos necesarios para planificar una prueba A/B realmente bien. Y luego, al final de esta planificación, todavía tiene que salir que hay suficiente tráfico en las zonas donde pruebo y así sucesivamente. Así que es complicado, pero la tecnología es en realidad la misma, con la ventaja de que podemos hacer estos simples cambios de JavaScript sin una herramienta extra, sin necesidad de cookies y demás, sino que simplemente lo lanzamos en la página, de acuerdo con ciertos criterios, al igual que puedo, por ejemplo, descomponer los días en el gestor de etiquetas de acuerdo con la URL o lo que sea y puedo simplemente empezar con ello. Y es por eso: JavaScript, de alguna manera mi gran amor en línea.

Y sí, de hecho aconsejaría a todo el mundo que conociera JavaScript un poco mejor, aunque JavaScript no suela estar en Tinder, pero JavaScript es muy poliamoroso y le gusta enamorarse de todo el mundo de vuelta, sólo tienes que enamorarte de JavaScript. Así que empieza, aprende un poco y luego podrás conseguir mucho con él.

Muy bien, o pregúntale a alguien que sepa del tema. En mi coaching, en mi equipo de hacking de conversión, también tengo un desarrollador de JavaScript que profundiza un poco más en esas cosas, para no tener que hacerlo todo yo, y por supuesto el tema de JavaScript siempre es una parte importante de todos los proyectos. Sí, y si usted está buscando a alguien que sabe cómo hacer eso, bueno, entonces usted sabe dónde encontrarlo. Tantas conversiones, estoy deseando ver ejemplos de cómo has implementado las cosas muy rápida y eficazmente con JavaScript.

Sólo tienes que enviarlo a jdk@jdk.de. Sí, y si queremos hablar más en profundidad sobre cómo podemos poner en marcha algo así juntos: jdk.de/appointment, basta con solicitar una reunión inicial. Entonces podremos hablar de si tenemos posibilidades de trabajar juntos. Suelo devolver la llamada relativamente rápido cuando recibo una consulta y entonces lo resolvemos. Así que todo lo mejor y muchas conversiones y eso rápidamente a través de pequeños y geniales hacks de JavaScript.