 Buenas tardes a todos. Espero que estén disfrutando hasta ahora lo que es la World Cancer Agosa 2024. Este evento hecho con mucho cariño de parte de la comunidad World Press Zaragoza y lo voluntario, obviamente. Nuestra siguiente ponencia, a cargo de Álvaro Torres, es acerca de cómo desarrollar un plugin de AVE Test. Álvaro Torres, lo presento, es fundador de WebHero en España y ha trabajado en varias empresas internacionales. Desarrollador Web especializado en World Press y lleva muchos años trabajando en el área de Web desde la época de Flash. Los dejo con ustedes, Álvaro Torres. Gracias. Muchas gracias, Alex. Buenas tardes a todos. Bueno, me siento un poco más como un DJ con el frío y esto y lo ordenador adelante como un ponente. Pero bueno, voy a hacer lo que pueda. Espero que todo aprendáis que esa es la intención y empezamos con lo que veis en la pantalla. Seguramente tendréis curiosidad y me gustaría preguntaros a todos y a todas quién conoce a este señor. No en persona, por supuesto. ¿Quién sabe quién es? ¿Vale? ¿Por qué motivo? La evolución, exactamente. Eso es. No, no, no es otro. Según la evolución, hay tres conceptos muy importantes. Existe descendencia con modificación mediante selección natural. Fijaros bien. Existe una descendencia con una modificación que, si lo miramos desde el punto de vista del objetivo, la evolución en sí misma, es una modificación para optimizarse al medio, al entorno, para estar optimizado básicamente. Entonces, si yo lo pre, o sea, os estaréis preguntando, ¿por qué este hombre me está hablando de Darwin, de la teoría de la evolución, si yo vengo a saber sobre los test a ver? Como podéis ver en esta pantalla, hay parejas que dan un resultado, que se vuelven a emparejar y que vuelven a dar otro resultado y así sucesivamente. Es muy importante lo decir sucesivamente porque es de forma permanente, ¿por qué? Porque el medio también evoluciona. Es decir, si, por ejemplo, nosotros somos de una especie y estamos constantemente evolucionando, una especie que también esté en el medio, en el entorno, va a estar contactamente evolucionando. Por lo tanto, todo el medio evolucionará al mismo tiempo. O sea, la evolución es constante. No podemos quedar estancados. ¿Y por qué os digo esto? Porque en realidad los test a ver son prácticamente lo mismo. Son varias versiones que al final llegan a un resultado optimizado para el entorno. En nuestro caso, podría ser para el público objetivo. Entonces, ¿viste este punto de vista? Podría decir, todos somos resultados de un test a ver. Y diréis, pues tampoco mola mucho. Pero si os lo digo de otra forma, mediante la selección natural, uno y cada uno de los que estamos aquí, somos la mejor versión para el momento y el lugar donde vivimos. ¿Cuánto tiempo hacía que no nos decían algo tan bonito? Bien, como bien ha dicho nuestro compañero Álex, soy Álvaro Torres, fundador de weberue.com, weberue.com, e al final, que con los anglicismos siempre hay muchas confusiones. Y como veis en la descripción, me encanta estrujármelo sesos para crear nuevos proyectos digitales que me compliquen la vida un poquito más. Esto es totalmente cierto, pero tranquilos, que también lo he aceptado totalmente. Esta es mi Twitter, que no lo uso mucho, pero soy más de LinkedIn, ¿vale? La red social y yo, pues no nos llevamos muy bien. Pero sin embargo, LinkedIn sí que lo suelo utilizar. Si buscáis Álvaro Torres weberue o Álvaro Torres WordPress, sin duda alguna, que me encontraréis. Bien, la ponencia la quiero dividir en tres partes. La primera parte, hablo de los testa B, de qué son, cómo pueden beneficiarnos. La segunda parte hablaré de qué es un plugin de WordPress, como adivinaréis. Y en la tercera parte, hablaré sobre cómo hacer un plugin muy sencillito sobre testa B. Mi intención aquí es que, sobre todo, la gente que no sabe programar, empiece a tener un gusanillo y que se le quite ese miedo, porque en realidad todo el mundo se imagina al típico hacker con gorro y la pantalla verde y negra y no es así. O sea, es mucho más sencillo de lo que parece. De hecho, programar es como hablar otro idioma, ¿vale? Por ejemplo, de aquí, ¿quién hay? Que no hable ni inglés ni francés, sino otro idioma más, ¿vale? Por ejemplo, el señor Pablo Moratinos, ¿qué otro idioma habla? Euskera. ¿Nos podría decir, por ejemplo, cómo se dice Buenas tardes en Euskera? Arrachaldeu. ¿Cómo? Arrachaldeu. Arrachaldeu. Podéis decirlo, todo junto, Arrachaldeu. Arrachaldeu. Mira, acabéis de decir, en menos de 10 segundos, ya habéis dicho algo en otro idioma. Esto quiere decir que, en realidad, aunque está claro que tener una conversación os va a llevar mucho tiempo de aprenderlo, pero siempre se puede hacer algo con los primeros 10 segundos que está aprendiendo algo, ya podéis empezar a hacer algo. Que estáis con la guitarra, seguro que podréis hacer algo, que estáis con otra historia, seguro que podréis aprender algo. Entonces, desde el primer momento que os ponéis a programar, podréis empezar a realizar cosas interesantes. Esto es muy importante porque, además, o sea, el típico miedo de podréis llegar a, eso en realidad no existe, es ponerse a y después ver lo que sucede, ¿de acuerdo? Entonces, ¿qué son los test A B? Los test A B, como ya adivinaré con lo que he dicho antes, no son más que un resultado que viene de diferentes versiones. O sea, tenemos diferentes versiones de algo y elegimos la mejor versión y esa es el resultado optimizado. Para lo que nosotros buscamos, básicamente, como podéis ver en la definición que he puesto ahí, los test A B son pruebas con diferentes versiones que nos permitan obtener datos para llegar a conclusiones con las que realizar modificaciones. Vale, es una definición que de golpe hay que analizarla, pero si os fijáis, solo con lo que está en negrita. Versiones, datos, conclusiones, modificaciones, ¿vale? Hay varias versiones que nos dan datos con los que llegamos a conclusiones y realizamos modificaciones para que el objetivo, la optimización, el éxito de la web. Hasta aquí todo lo entendemos, creo, ¿no? ¿Para qué sirve un test A B? Y esto lo digo desde mi punto de vista, ¿vale? Esto puede haber mucha gente que tenga una opinión diferente, pero desde mi punto de vista hay estos tres elementos esenciales. Sirve para conocer la interacción que hay con un elemento y sus variaciones. Segundo punto, para conocer la interacción que hay con el entorno de un elemento y sus variaciones. Y el tercer punto y para mí, por lo menos, el más importante, conocer a nuestro público objetivo. No es algo que se hable mucho, es lo de público objetivo. Voy a presentar unos ejemplos para que lo entendáis un poco mejor. Aquí, esto era una web que, cuando la web de afiliados, o sea, las cuentas de afiliados, sobre todo las de Amazon, estaban en boga, que todo el mundo estaba y había mucho dinero por medio y tal y funcionaban muy bien, pues yo creé una web de ropa interior femenina. Entonces, en aquello entonces yo no conocía el poder de los test A-B. No conocía el poder del marketing, bueno, en este sentido, los test A-B. Entonces yo, como veis, puse un botón del mismo color de la marca y con un texto enorme, ¿no? Claro, esto, al optimizarlo, yo decía, ¿cómo puedo hacer que, cambiando texto, cambiando posición, forma, color, ¿cómo puedo hacer que la gente haga más clic en este elemento? Sólo haciendo esos cambios. Bueno, investigando, conocí los test A-B y descubrí que, cambiando el texto a algo más comprensible y mucho más corto y que fuese un mensaje mucho más contundente, se obtuviese un beneficio. Y que, cambiando el color, también, si os fijáis, aquí se halló y se test A-B por separado, ¿vale? Posición, color, texto, todo. Pero si os fijáis, el texto es ver oferta en tal cual, pues solo ese texto era lo que yo, la conclusión que llegué con eso está A-B en esos momentos, ¿vale? Y después el color rojo, que muchas veces se puede considerar como un color muy agresivo. En esta web en concreto, no. En esta web se resultaba, como imagino yo, emergencia, urgencia de las usuarias que visitaban esta página. Pues solo con este cambio, pum, 38% más. Es decir, si había 100 clicks, con este cambio, ya había 138 clicks, ¿vale? Entonces, para que veáis solo con eso lo que se puede convertir. Claro, imaginaros, 100, 138, en verdad estoy hablando de una cifra muy baja, pero si lo sumamos a 1.000, de repente serían 1.380 clicks más. Y así sucesivamente, o sea, podéis imaginaros. Siguiente, esto era un proyecto en el que estuve trabajando, un proyecto internacional, pero esta era la sección de Francia de una empresa mayorista de Piercing. Entonces, lo que queríamos conseguir era que se hicieran más clicks en ese botón. Y lo que hicimos es colocar un texto debajo, destacando ciertas características de ese negocio, de ese proyecto. Entonces, se nos ocurrió poner varias, que podéis verla ahora. Bueno, está todo en francés, pero lo voy a poner ahora en castellano. Estos son los textos que pusimos. Se pensaba la versión original, que no tenía texto. Después, la opción A, que ponía sin cantidad mínima requerida. La opción B, garantía de rembolso de 30 días, la opción C, pedidos preparados en menos de 24 horas. Entonces, siendo una empresa de mayoristas de Piercing, cuando alguien busca mayoristas en la web, que es lo que buscas, comprar grandes cantidades a un precio muy bajo, ¿no? ¿Estamos de acuerdo en eso? Vale. Entonces, ¿qué creéis vosotros de aquí que sería lo más lógico a destacar para la gente que busca mayoristas de Piercing en la web? La A, sin cantidad mínima requerida. Si los mayoristas, en realidad, se compran grandes cantidades, pues, chico, me arroro todo el esquema. Yo me esperaba que iba a decir otro. Pero no, no, pero es que la cosa que ha acertado. Normalmente el resto de la gente diría otro, ¿no? Garantía de rembolso de 30 días o pedidos preparados más rápido. Pero, sin embargo, la opción A fue la que se multiplicó en un 73% más. Y con esto, lo que quiero decir es que, aparte de haber multiplicado los clics en esos botones, hemos obtenido una información muy relevante sobre nuestro público objetivo, algo que no habríamos descubierto de otra forma. O sea, poniéndose texto probando las diferentes características destacadas de la empresa, conocimos que, en realidad, la gente que busca mayoristas de Piercing en Francia no estaban buscando comprar grandes pedidos, estaban buscando comprar pedidos pequeños, lo cual es una información muy, muy relevante para el éxito de ese proyecto en particular. OK, aquí no me voy a parar mucho porque, si no, no voy a dar tiempo, pero, voy a decir, ¿cómo se hace un test A B? Esto desde mi punto de vista siempre, ¿vale? Eso tenés en cuenta. Si se identifica un problema o una mejora, se analiza la interacción de los visitantes con ese elemento en sí y, después, se plantean diferentes posibilidades de mejora, ¿vale? Después se realizan las pruebas con una herramienta que nos devuelva datos y, después, se analizan esos datos y se comprueban las combinaciones. O sea, si, por ejemplo, el mejor texto es este, pero el mejor color es este, luego comprobamos también las combinaciones, porque muchas veces, aunque sean los dos el mismo, es muy probable que varíe cuando se convinen, ¿vale? No quedarse satisfecho, sobre todo. Recordad lo que os dije de que el entorno evoluciona al mismo tiempo que evoluciona nuestra web. Entonces, es verdad que hoy es probable que nos funcione algo, pero que en la temporada siguiente, por ejemplo, cambie o que cambie por temporadas, que en invierno funciona de una forma, en verano de otra. O sea, que no quedarse satisfecho con los datos que obtengamos. Hay una herramienta, normalmente todo el mundo analiza lo típico, Analytics, etcétera, gráficas, ¿vale? Sí, pero hay una herramienta de las que no se hablan tanto de que también nos pueden ser muy útiles a la hora de hacer tests, ¿sabes? Estas herramientas son los mapas de calor, en particular, los de scroll, los de saber dónde hacen click, los de atención. Y voy a daros algunos ejemplos. Por ejemplo, esta es un mapa de scroll. Entonces, coma un mapa de calor, mientras sea mayor temperatura el color, más rojo, ¿no? Más clicks hacen, como podéis ver ahí, el 90%, quiere decir que yo estoy poniendo el rato en ahí y justo me está devolviendo en esa zona el 90%, mientras más para abajo, si os fijáis, abajo a la izquierda, pone 75% y está más amarillento, ¿vale? Es bastante sencillo de entender. Después, esta es un mapa de calor de clicks. Como veis, hay ciertos puntos. Si os fijáis, hay un enlace donde hay unos poquitos de clicks, pero donde más clicks hacen es en el titular y en la imagen. Eso quiere decir que quizás los usuarios y usuarias están haciendo click ahí porque quieren ver ese producto en particular, sus características, etcétera. O sea, sería algo muy interesante de analizar mediante test A, B, esos elementos, ¿vale? Y el titular. El titular es algo muy común. Entonces es muy importante esto. Tercero, voy a presentar los mapas de atención, ¿vale? Estos son una herramienta que mediante inteligencia artificial le envías el diseño y analizan y te muestran una estimación de dónde habrá mayor atención de los usuarios y usuarias. Entonces, bueno, deciros que este proyecto fue genial. Esta persona en particular es increíble, además de guápea atractiva. Y bueno, es mi pareja y además una gran profesional. El mapa de calor, como podéis ver, tiene justo donde está el CTA, justo donde está la cara de ella y justo donde está salud femenina y fertilidad y embarazo, ¿vale? ¿Por qué está así todo organizado? Pues en realidad nosotros queremos destacar el CTA, que es para reservar la cita. Y luego también queremos dar un poco de relevancia a la imagen de ella para darle esa profesionalidad, esa seguridad, confianza, etcétera. Y luego fijaros que justo donde están los botones de salud femenina y fertilidad y embarazo, que son su target, digamos, es donde más hay enfoque, ¿vale? Lo que me llama mucho la atención de aquí es que, sin embargo, el CTA de arriba a la derecha no se ha resaltado nada, lo cual es algo que, incluso con el color, a mí me llama mucho la atención. Pero bueno, es algo a analizar siempre y, sobre todo, mediante testa B, ¿no? Muy bien. Vamos con la segunda sección. ¿Qué es un plugin? Un plugin no es más que una extensión de código. Así que no hay que tener miedo a instalar más plugins. Siempre estamos todos con vamos a ver cuántos plugins instalamos, vamos el límite cuál es el número. En realidad no hay un número exacto, pero lo que tenemos que ser conscientes es que, dependiendo del plugin que instalemos, pues puede tener unos tiempos de carga más alto, porque se cargan archivos externos, por ciertos tipos de cosas. Pero es importante tener en cuenta que depende de qué plugin. Y, sobre todo, si es personalizado y bien hecho para nosotros, va a estar optimizado para nosotros y no debemos tener problemas. El problema es cuando descargamos 40 plugins de terceros, ¿vale? Y ahí sí que es probable que tengamos problemas. Entonces, un plugin no es más que una extensión de código. Fijaros, en esta diapositiva he mostrado los elementos esenciales que debe tener un plugin. En un archivo, en la carpeta plugins, o sea, concretamente si vais en FTP, VP content, plugins, y ponéis un archivo. Aquí yo lo he llamado av.php y lo he nombrado, como veis. Esto es un plugin totalmente funcional, ¿vale? Ahora, a la zona de plugins de la zona de administración, y ya puedes activarlo, desactivarlo, instalarlo, puedes, vamos, funciona perfectamente. ¿Qué es lo que pasa? Que no sirve para nada porque está vacío, ¿vale? Tenemos un plugin, hemos creado un plugin, ¿vale? Pero en realidad no tiene funcionalidad ninguna. Y aquí, bueno, luego si os descargáis la ponencia, tendréis el código del archivo, o sea, del plugin que vamos a desarrollar ahora, ¿vale? Tercera parte. Y supongo que la gran mayoría habrá venido por esto. ¿Cómo se desarrolla un plugin sencillo de testa B? En este plugin, solo queremos tener un botón en la página de inicio y que ese botón tenga dos clases SSS. ¿Entendéis lo que son las clases SSS? Sí, todos y todas, porque eso sí que es esencial para entender cómo funciona este plugin. Como he dicho antes, mi challenge, mi reto aquí es que vosotros os pique el gusanillo después de decir, joder, yo soy capaz de programar algo, aunque sea un poquito, ¿vale? Porque es que todos soy capaces de creerme. Entonces tenéis un botón al cual se le ponen dos clases SSS, una clase que la vamos a llamar botón testa B, como veis ahí, y esa clase va a permanecer permanentemente en ese botón, ¿vale? Después hay otra clase que se llama testa B barra original. Esa clase va a ser dinámica, va a cambiar, ¿vale? ¿Qué quiero decir con esto? Si carga la página de inicio y se comprueba que el número de cargas que ha habido, del número de visitantes, ¿no? SPAR va a cambiar la clase testa B original por la clase testa B. ¿Pero cómo? Vamos a ello. Aquí quiero dar un poquito de cosita de estimulación, ¿vale? Y es que a mí me hace mucha ilusión decirlo, sinceramente. Tenemos cinco funciones, de las cuales la última no la vamos a contar porque el panel de control es muy sencillo. Pero son cuatro funciones, cuatro funciones que si ahora cada uno de vosotros y vosotras lo entendéis, eso para mí va a ser una bozada. Pero para vosotros es un, me salen palabras un poco, pero un puntazo, vamos. Si sois capaces de comprenderlo y de empezar a ver las webs con otra perspectiva, podréis ver hacer funcionalidades que en realidad solo la imaginación tiene límite, ¿vale? Primera funcionalidad, un 0 en numerito, ¿vale? En realidad, crear tres cajas con un contador a 0, una caja para el contador de visita, otra caja para el contador de clicks de la versión original y otra caja para el contador B. ¿Lo habéis entendido? ¿Sí? Si en algún momento tenéis alguna duda, por favor, levantad la mano, o lo que sea. Segunda función, se decide qué clase se va a colocar. Por eso están las mellizas, una de roja, otra de azul. Si una clase la hemos puesto con el fondo de azul y otra clase la hemos puesto con el fondo rojo, pues cuando cargue una página, la página de inicio, si es par, se pone la versión B y si es impar, se pone la versión original, o sea, bien, el color rojo o bien el color azul. Tercera funcionalidad, cuando alguien hace click en el botón, envía la información de que se ha hecho click, pero ¿cómo? ¿Vale? Obtenemos la versión que es, bien, la original o la versión B y entonces se envía mediante post, que he puesto aquí la cartita, es muy gráfico. ¿Vosotros imaginaron? Vosotros cogeis una carta, la metéis en el buzón y luego mágicamente llega al lugar de destino donde que habéis puesto, ¿no? Es así, o sea, mágicamente, porque hay un proceso, ¿no? Pero vosotros lo único que hacéis es metéis la carta, porque aquí sucede lo mismo. Es post, se llama, ¿no? Es como correo postal. Vosotros envíais los datos y luego, mágicamente, aparece una otra función y esa es la cuarta función. La cuarta función obtiene los datos post, o sea, la carta que estáis viendo y luego se gestionan, que el realidad gestionarlo es solo almacenar la versión en la que se ha hecho click, ¿vale? O sea, fijaros, estas cuatro funciones son muy sencillas y ya podéis tener una funcionalidad muy potente en vuestra web, ¿vale? Ahora vamos a saco con el código. Adiós. No me falta que, es que no lo enchufao. Perdonarme. ¿Cosa del directo? A ver, un segundito. Pero vamos directos al código ahora mismo. Bien. Entonces, como he explicado antes, habéis visto, acordáis, del plugin que lo único que había que tener es el nombre del plugin. O sea, la línea en verde que mostré y mostraba entonces ya el plugin en la zona de administración. Vale, esto como os dije al principio, la programación no es más que hablar en otro idioma. Entonces, esto solo tenéis que copiarlo, pegarlo, porque hay ese idioma y luego adaptarlo a vuestras necesidades. O sea, copiáis, pegáis lo que cambiáis, el nombre del plugin, etcétera, etcétera, ¿vale? Entonces, si volvemos aquí, ya vais a ver que hay mucha más información. Hay, por ejemplo, el nombre del plugin, la descripción del plugin, la versión del plugin, quien ha hecho el plugin, el enlace, y el enlace a la página web del plugin en sí mismo. Vale. Entonces, ¿recordamos cuál era la primera función? Bueno, esto de aquí, copiar, pegar, ¿vale? Esto evitamos que los cacos virtuales entren en nuestra página. Esto básicamente para que no puedan entrar en nuestro plugin mediante URL. No hace falta estudiarlo. Simplemente, copiar, pegar, ¿vale? ¿Recordáis cuál era la primera función? ¿Qué os dije? A ver si habéis prestado atención a alguien. Poner contadores a cero. Exactamente, eso es. O sea, ponemos tres cajas a cero. ¿Por qué? Porque vamos a almacenar los clicks y porque vamos a almacenar las veces que se visita la página, ¿vale? Entonces, en Wordpress, en el idioma de Wordpress, dicho así, las cajas se llaman options. Son unas cajas que vamos a tener siempre accesibles, ¿vale? Entonces, almacenamos esos datos en esa caja. Tenemos tres cajas, una para los contadores de visitas, otra para los clicks que hacen en una versión y otra para los clicks que hacen en otra versión. ¿Lo veis? Tres cajas. De forma gráfica, es muy fácil de comprenderlo, ¿vale? Entonces, tres cajas que esto es, añade la caja, porque la opción, como he dicho, es la caja. Y después, el nombre de la caja en sí y el valor. Es tan sencillo como eso, ¿vale? Después, más adelante, vamos a ver también que también está la función que lo que se hace es obtener caja, getOption y actualizar caja, updateOption. Es muy sencillo, ¿no? ¿Sí? Vale, me gusta. Siguiente, ¿alguien se acuerda de que era la siguiente función? Justo, o sea, si se carga la página de inicio, si es par, se modifica la clase SSS. Si es impar, se mantiene la clase original, ¿vale? Entonces, como podemos ver aquí, descrito, cuando se carga la página de inicio, obten las visitas y depende de las visitas que haya. Si es par, sustituimos la clase del botón o sumamos uno y después sumamos uno a las visitas, porque es una visita nueva. Bien, fijaros aquí. Esto es el contenido de la página, ¿vale? Esto de aquí es muy sencillo. Si no es la página de inicio, vúélvete. ¿Qué quiere decir? Que si no es la página de inicio, porque no sigan esta funcionalidad. Si es la página de inicio, continúan esta funcionalidad. Muy fácil. Obtenemos la cantidad de visitas. ¿Qué es lo que hacemos? GetOption. Obtenemos la caja de las visitas, ¿vale? Entonces, tenemos la caja de las visitas y la tenemos en el recuento. Y aquí, quizás, el concepto más difícil de todo. Pero que bueno, es bastante sencillo. Si la cantidad de visitas dividido por 2 no da un resto, es decir, no tiene decimales, por eso es igual a 0, entonces es que es par, ¿no? ¿Vale? Pues si es par, lo que hacemos es replace, reemplazamos la clase original por la clase B, ¿vale? ¿De qué? Del contenido. Igual lo vemos almacenando en el contenido. Esto puede ser un poco lioso, pero básicamente lo que se está haciendo es cogemos el contenido y decimos, ¿vale? Coge la clase original y la cambias por la clase B. No tiene mucho mundo. Entonces, seguimos y lo que hacemos es actualizar la caja de visitas. ¿Por qué? Porque hay una visita nueva, por lo tanto, más 1. ¿Qué es lo que estamos haciendo aquí, ¿vale? La caja de visitas, le sumamos 1. ¿Vale? Ese símbolo es algo así como dividido. O sea, en realidad es módulo. Se llama. Vale, ya lo siento. Ah, vale. Y siguiente función, ¿o acordáis del post, o sea, el dedito del click y la cartita? Pues eso, reaccionar a los clicks. Si hacen click en el botón, entonces almacenamos ese click. Y eso cómo funciona? Básicamente, teníamos la clase permanente que os deja el principio y la clase que dinámicamente iba cambiando o no, ¿vale? Pues entonces, lo que hacemos es, si alguien hace click en la clase permanente, porque esa siempre va a estar si a la versión que sea, pues entonces obtenemos la otra clase y así sabemos la versión que es. ¿Vale? Vamos a ver. Entonces, aquí lo mismo de antes, si no es la página de inicio, que se vuelva por donde ha venido. Y entonces, aquí lo que estamos diciendo, esto es el lenguaje en sí, lo de antes. Como en el idioma, copiar, pegar. Es que no tiene más mundo, ¿vale? Se copia, pega y luego, como esto está, esto sí que tenemos que decir, es un condicional pero es un poquito especialito, porque esto está escrito en JavaScript, ¿vale? Y lo que decimos aquí es, si haces click en el botón, testa B, entonces haz todo lo que hay aquí dentro, ¿vale? Y esto, básicamente lo que dice es, si el botón tiene la clase testa B, guarda el nombre de la caja B. Si el botón, en cambio, tiene la clase testa B original, guarda el nombre de la caja a B web original, ¿vale? Esto es muy sencillo, simplemente una condición. Por ejemplo, esta chica de aquí, tan maja. Y este chico de aquí, tan majo también. Están asentados en medio, en medio de poner un móvil. ¿Habéis fijado? Es una condición. Entonces, el resultado de esta condición, ¿qué sería? Que sí, ¿no? Pues exactamente, eso es lo que hay aquí. Simplemente una condición, eso es lo que tenemos que aprender. Entonces, si tiene la clase tal, haz esto. Si tiene la clase cual, haz lo otro. ¿Dudas? ¿No? Pues, en vuestra mente estáis programando, que lo sepáis. Bien, entonces, después almacenamos, como os recuerdo de nuevo, se envía mediante post, ¿vale? Mediante post era enviar una carta. Era la metáfora que he hecho, ¿no? Pues mediante post, lo que vamos a enviar es esto. Si en lo de action esto le ponemos el nombre de la metáfora, del código postal, ¿vale? Y lo siguiente son los datos, el contenido de la carta, ¿vale? Entonces, enviamos el código postal y el contenido de la carta. Esto es el lenguaje. Otra vez, copiar, pegar, no tiene más mundo, ¿vale? Entonces, lo que estamos enviando es mediante Ajax, que yo no sé por qué, pero siempre me recuerda Phoenix. ¿Será porque tiene dos vocales y una aquí al final? Es posible, ¿no? Pero a mí siempre me recuerda Ajax, Phoenix, no sé por qué. Total, que estamos enviando estos datos, hemos dicho el código postal y la versión mediante Ajax o Phoenix, lo que queráis. Entonces, tenemos la última función de todas en la cual se obtienen los datos y se gestionan o explico la función mediante Ajax, ¿vale? Phoenix. Si se recibe una petición con el código postal, que esa es la metáfora que yo me inventado, ¿eh? Clique Item, ejecuta esta función. Esta función es esta que tenemos justo encima. Y entonces luego decimos aquí, sí, como es un condicional, si no está vacío, la versión ejecuta el contenido que hay en esa función, tan sencillo como eso, ¿vale? Entonces, estamos almacenando la versión, que os recuerdo, era la clase CSS, si era la original o la B, ¿vale? Y después, al almacenar el nombre de la caja, porque aquí estábamos guardando el nombre de la caja, ¿ocordáis? ¿Vale? Pues entonces, obtenes la caja y le sumas un clic, ¿vale? Le sumas un nuevo clic. O sea, estamos obteniendo la caja, ya lo expliqué esto antes, obtenen la caja con el nombre tal que el nombre es la versión que hemos dicho. Y después actualiza la caja sumándole uno. ¿Hay alguien que no entienda algo? Por favor, que no le de miedo de decir nada, que no hay problema ninguno. ¿Todo el mundo lo había entendido? Joder, macho, qué público, qué público, por Dios. Dígame usted. Hola. Yo no he entendido bien, porque al principio tenías que decir si es par o impar. Básicamente, porque lo que tenemos es, estamos haciendo el test a ver en una página de inicio, ¿vale? Entonces, en esa página de inicio hay ciertas visitas. Nosotros estamos contando las visitas y la estamos almacenando ese recuento de visitas, ¿vale? Entonces, como solo tenemos dos versiones, la forma que lo estamos haciendo es mostrar una versión o otra, dependiendo si es par o impar. Entonces, tenemos una clase CSS que se modifica, dependiendo de si el número de visitas es par o impar. Entiendo. O sea, si es par, se pone de un color y si es impar de otro. Justo, de un color o eso ya lo que vea más oportuno, cambiar la clase CSS que tú prefieras, pues puedes cambiar el tamaño, puedes cambiar el color del texto, el color, pero claro, son dos clases CSS que van alternando, dependiendo de si es par o impar. Dependiendo del número de visitas se pone de un color de otro, por así decirlo. Justo eso, ¿sí? Vale, perfecto, no entiendo, no entiendo. Gracias. Y luego, la última función, que esto era la que nos decía, que no merecía la pena de hablar demasiado de ella, porque en realidad es muy simple, ¿vale? Esto es contar las visitas, o sea, contar. Uy, ya me lié algo de antes, perdón. Esto es simplemente copiar, pegar. Y esto es para la administración del menú. Esto es simplemente para que nosotros desde el menú, desde el panel de control, pues tengamos una funcionalidad, ¿vale? Es copiar, pegar y no tiene más mundo. Lo único que tenemos que tener en cuenta es esto de aquí, que es la función, ¿vale? Aquí lo he puesto, función para ver los datos, ¿vale? Y esta función la estamos llamando desde aquí abajo y básicamente estamos obteniendo las tres cajas, las tres cajas famosas que desde el principio estábamos hablando, pues la caja de la visita, la caja de la versión original, la caja de la versión B. Y luego la estamos mostrando mediante HTML y CSS. No tiene más mundo. Vamos a ir para que veáis el ejemplo. Esto es lo que se está mostrando, ¿vale? Y este es el ejemplo que, como bien ha dicho el compañero, yo solo lo único que he hecho es cambiarle el color, ¿vale? Entonces, yo actualizo ahora color azul. Actualizo de nuevo color verde, ¿vale? Ahora se habrán actualizado visitas totales, supongo que pondrá, debería, vamos a ver si no me sale bien mala hora, que sería un poco, pues la visita total debería poner 118. Vamos a ver, hay 119, habría entrado antes. Y ahora voy a hacer clic, por ejemplo, voy a cargar una vez más esta en versión azul. Entonces, si hago clic, debería poner aquí 120 y en versión original 20, ¿vale? Vamos a ver. Alguien puede poner a ver si no explota esto. Pues básicamente, ¿qué es lo que sucede aquí? 20, 120. Señores, me falta el gorro. Bueno, he de decir que hay sorpresa y regalo en este evento. Un compañero, para mí, es como mi mentor, es un maestro, es una persona increíble. Y yo le pidió el favor de que él hiciera, porque claro, el código que hemos mostrado, hemos mostrado de una forma lo más convencible posible. Pero habría que tener otras cosas en cuenta, como por ejemplo el escapado, el saneamiento, ciertas cosas un poquito más técnicas, un poquito más avanzadas, pero tampoco exagerado, ¿vale? Y le he pedido a Carlos Longarela, que para mí es mi rockstar y mi mentor, que él escribiera el código para que lo tenga de vosotros. O sea, el código bien hecho. Entonces, para los que se descarguen el código en GitHub, también hay una rama que se llama C Longarela, que él ha hecho el código. ¿Cómo debería estar hecho ese plugin? Bien hecho, ¿vale? Así que tenéis las dos versiones, la sencillita y la bien hecha. Y bueno, entre todos, le damos mil besos a Carlos Longarela desde aquí. Y bueno, yo creo que podemos ir con las preguntas. Si tenéis alguna pregunta más. Una pregunta. Sí, por aquí. Soberá por lo de la descarga, has dicho en GitHub, ¿no? En GitHub. Sí, o sea, según tengo entendido, en Wordpress TV van a poner también lo que es todo la presentación. Entonces, la misma presentación, creo que en la plantilla, pues estará la 26 por ahí, pone el código del plugin y ahí llegáis al repositorio de GitHub. Vale, gracias. Hola. La pregunta, o sea, he visto que cuando recargabas, al mismo usuario, le pueden estar apareciendo las dos versiones. Es un caso de que fuéramos únicos, por ejemplo, como puede estar afectando tanto a la recogida de datos como, por ejemplo, a las ventas. El que cada vez que recargue le ha aparecido la versión, pues, dependiendo del número de visitas. Sí, sí, muy bien visto y muy buena pregunta. La cosa es que este plugin, yo lo he hecho sobre todo para iniciar a la gente, pero en realidad, para hacerlo como tú dices, lo ideal sería mediante cookies, por ejemplo. Entonces, almacenar los datos de los visitantes, o sea, en el navegador mismo del visitante y entonces que siempre le aparezca la misma versión. Aquí yo lo he hecho muy simple, lo más simple posible, porque mi principal foco era que se viese la simpleza con lo que se puede llegar a hacer cosas. Básicamente, tocar una canción de Nirvana con la guitarra al principio, que es lo que hacemos todos. Pues básicamente algo así. Lo más simple que se pueda hacer y algo ya con cierto potencial. Pero tienes toda la razón. Para eso, después hay muchísimas herramientas muy útiles y que tienen, por ejemplo, pues te puedo decir yo que sé, VWO, Optimonk o Mida, que tiene una limitación de hasta 50.000 visitas y que os dan un servicio, o sea, muchísimas más opciones que esto, esto simplemente es algo muy, muy, muy básico, ¿vale? Yo quería hacer una pregunta sobre el código que has puesto en lo de GetOption. No has inicializado esas opciones, ¿no? O sea, ¿no las has definido primero? Sí, al principio del todo, la primera función era AddOption. Fíjate, sí, mira, al principio del todo, la primera función de todas, de hecho, es para eso. Fíjate, esto con lo que hacemos es al registrarse el plugin, o sea, al activarse el plugin, cuando tú hace click en el botón activar plugin, que suceda eso. Entonces, por lo que hacemos es crear esas opciones, ¿vale? Esas cajas. A ti, hombre. Bueno, lo primero que te doy, muchas gracias. A ti. Yo soy desarrolladora Cerreo, entonces uso herramientas. Uy, no te escucho muy bien. ¿Qué? Uso herramientas. Soy desarrolladora Cerreo, entonces, pues, bueno, desarrollo, pues, con las herramientas que has comentado, ¿no, Ernesto? Cuando he venido hasta charla, no se me hubiera ocurrido que él te sabe y va a ser en la misma página. O sea, yo pensaba que el botón te iba a llevar a, como, a dos versiones diferentes, ¿no? Dos páginas, digamos. Se podría, entiendo, ¿qué podrías hacer que el botón, dependiendo la clase, te lleva a ser una versión o otra? O sea, que cada vez se podría ir complicando más este plugin. Como he dicho al principio, la programación no tiene el limitio. O sea, podría hacer lo que quisiera. Podría llevarte a otra página. Podría abrirte un pop-up diferente, depende de la versión. Podría hacer infinidad de cosas. Eso ya es lo que se te ocurre y el testeo que quiera hacer. Claro, luego ya entramos en la segmentación y todo eso, pero está súper, súper chulo. Sí, muchas gracias. A ti, gracias. OK, muchas gracias por su atención. Me han delegado, la organización me ha delegado para darle un obsequio acá a Álvaro por su colaboración a nuestra Workam. De parte de la organización de Workam Sarabasa 2024, que entrega este obsequio para ti. Y muchas gracias por compartir tu conocimiento en este día. OK, pues nada.