En este artículo presentamos algunas de las situaciones habituales y algunas de las incidencias que experimentan los usuarios al intentar participar en una promoción que ha sido incrustada en una página web mediante un Widget, y una guía de resolución que da solución a todos los casos.

Éstos son los contenidos del tutorial:

• A. Incidencias relacionadas con las cookies de terceros

  • Introducción al problema de las cookies de terceros en Widgets

  • Incidencias habituales

    • Incidencia 1: El usuario tras identificarse vuelve a la pantalla de Login

    • Incidencia 2: El usuario no puede cambiar de idioma en promociones multiidioma

    • Incidencia 3: El usuario ve una pantalla de “juego no válido” al terminar un juego

    • Incidencia 4: tras hacer Autologin el usuario se le pide de nuevo que se identifique

  • Guía de resolución de incidencias relacionadas con cookies de terceros

• B. Otras incidencias

  • Aparece pantalla de error tras hacer login con Facebook y/o Google

  • Error: “jQuery is not defined” o “$ is not defined”

  • Mi Wordpress no acepta el tag <iframe/>

  • Las ventanas emergentes y popups quedan desplazados

A. Incidencias relacionadas con las cookies de terceros

Introducción al problema de las cookies de terceros en Widgets

Cuando se inserta el código del widget en una página web propia se genera un iFrame con el contenido de la promoción. Los contenidos de un iFrame son contenidos de terceros en la web. Esto significa que las cookies de la promoción pasan a ser cookies de terceros en la web donde se ha incrustado el widget.

Easypromos genera aplicaciones con contenido interactivo, y para ello las cookies son requeridas para proporcionar las funcionalidades necesarias para el correcto funcionamiento de la aplicación. Por ejemplo, las cookies son necesarias para:

• El sistema de Login, para crear y mantener una sesión de usuario participante.
• Los controles de fraude de los participantes en los juegos, los registros, los cuestionarios, etc.
• La gestión del idioma en las promociones multiidioma.
• Proveer funcionalidades concretas según el tipo de juego o aplicación.

Por lo tanto, para poder participar en las promociones de Easypromos, el usuario debe tener las cookies de terceros habilitadas. De lo contrario, el usuario no podrá participar en las promociones y juegos de Easypromos.

Sin embargo, debemos tener en cuenta que:

1. Por defecto TODOS los navegadores de dispositivos móviles (teléfonos, tablets) vienen por defecto con las cookies de terceros bloqueadas.
2. La mayoría de navegadores web de ordenadores de escritorio y sobremesa tienen las cookies de terceros habilitadas, pero la tendencia, como ya ha manifestado Safari y Chrome, es que se deshabiliten. Además las extensiones de seguridad y antivirus que instalan los usuarios, la primera barrera de seguridad que aplican es el bloqueo de las cookies de terceros.

Cómo identificar si el widget está incrustado utilizando un dominio de Easypromos o un dominio propio

El primer paso es saber si el dominio de la promoción incrustada forma parte de Easypromos (easypromosapp.com o bien cstmapp.com) o bien es un dominio propio del cliente. Para saberlo es necesario inspeccionar el código fuente de la web donde está incrustado el widget, y buscar el código que está incrustado. Allí se podrá ver si se ha incrustado la promoción con un dominio de Easypromos o con el dominio propio:

• En caso de haber incrustado el código adaptativo, deberemos mirar el campo “dominio”, y allí veremos el dominio utilizado.

• En caso de haber incrustado el código no adaptativo, deberemos mirar la URL del elemento <iframe>.

A continuación mostramos en una captura de pantalla cómo inspeccionar la web con el inspector de Chrome:

1. Una vez abierto el inspector pulsa CTRL+F para buscar entre el código fuente.
2. Busca la palabra “easy”, así rápidamente encontrarás el código que se ha incrustado. 

En esta captura de pantalla podemos ver que el código del widget está utilizando el dominio de Easypromos (a.cstmapp.com), mientras que el dominio de la página web es the-crispy-cookie.com. Por lo tanto, en este ejemplo la restricción de cookies de terceros aplica.

 

A continuación enumeramos las incidencias más habituales en caso de usuarios que acceden a la promoción desde un navegador que tiene las cookies de terceros deshabilitadas.

Listado de incidencias habituales

¿Qué sucede en una promoción incrustada en un Widget en caso que el dispositivo utilizado por el usuario tenga deshabilitadas las cookies de terceros? A continuación veremos algunas de las incidencias más habituales:

1. Incidencia 1: El usuario tras identificarse vuelve a la pantalla de Login

2. Incidencia 2: El usuario no puede cambiar de idioma en promociones multiidioma

3. Incidencia 3: El usuario ve una pantalla de “juego no válido” al terminar un juego

4. Incidencia 4: tras hacer Autologin el usuario se le pide de nuevo que se identifique

Puedes confirmar que tu incidencia está relacionada con las cookies de terceros revisando el dominio con el que se sirve el widget. Aquí te lo explicamos.

Incidencia 1: El usuario tras identificarse vuelve a la pantalla de Login

Incidencia: Los usuarios no pueden pasar de la pantalla de Login, entran en bucle y no pueden avanzar en el proceso de registro y participación. El sistema de Login para que el usuario pueda identificarse en la promoción funciona a través de cookies. Ver resolución.

Incidencia 2: El usuario no puede cambiar de idioma en promociones multiidioma

Incidencia: Al hacer clic en uno de los idiomas disponibles, no se muestra el contenido de la promoción en el idioma escogido. El cambio de idioma de la promoción depende de cookies, por lo que si el navegador las bloquea, el sistema no puede presentar los contenidos de la promoción en el idioma seleccionado. Ver resolución.

 

Incidencia 3: El usuario ve una pantalla de “juego no válido” al terminar un juego

Incidencia: El problema sucede cuando el navegador del usuario tiene las cookies de terceros bloqueadas. En este caso, si el usuario consigue acceder a la pantalla de jugar, verá que el juego no es válido, porque no se ha podido setear una cookie de seguridad/login que tenemos para el juego. Ver resolución.

 

Incidencia 4: tras hacer Autologin el usuario se le pide de nuevo que se identifique

Incidencia: El usuario no puede pasar de la pantalla de Login, pues ve la pantalla sin los botones de login social FB, Google, email, etc.

Uno de los problemas habituales de la integración de Autologin + Widget es el hecho de hacer el embed del widget con un dominio que no pertenece a la web principal. En este caso aplican las cookies de terceros, y si el navegador las bloquea, entonces no se puede iniciar la sesión del participante con su token, y aparece una pantalla como la que mostramos a continuación. Ver resolución.

Resolución de incidencias relacionadas con cookies de terceros

Si el dominio del widget pertenece a Easypromos (easypromosapp.com o cstmapp.com), o bien es un dominio que no pertenece a la web, entonces será necesario aplicar una de las dos soluciones que detallamos a continuación:

• Solución 1: PARA PROMOCIONES MARCA BLANCA SOLAMENTE. Utiliza tu propio dominio para publicar la promoción
• Solución 2: PARA PROMOCIONES PREMIUM (y MARCA BLANCA). Fuerza la apertura de la promoción fuera de la web principal

Puedes confirmar que tu incidencia está relacionada con las cookies de terceros revisando el dominio con el que se sirve el widget. Aquí te lo explicamos.

 Solución 1: PARA PROMOCIONES MARCA BLANCA SOLAMENTE. Utiliza tu propio dominio para publicar la promoción

La primera solución para evitar el bloqueo causado por las cookies de terceros es personalizar el dominio del widget con una URL que pertenezca a la propia web. De esta forma, como ambos dominios coincidirán, las cookies dejarán de ser de terceros, por lo que no existirá ningún tipo de bloqueo en este sentido.

Ejemplo: Si la promoción está incrustada en el dominio mipaginaweb.com, la URL de la promoción debería pertenecer a este dominio, configurando por ejemplo un subdominio que sea promocion.mipaginaweb.com.

A continuación explicamos los pasos que se deberán seguir:

1. Crea un subdominio en tu dominio. Por ejemplo:promocion.mipaginaweb.com

2. Vincula este subdominio en la promoción siguiendo estos pasos.

3. Una vez vinculado, solamente deberás copiar el código del widget y éste ya vendrá con tu dominio.

De esta forma, el código del widget con la promoción tendrá el mismo dominio que la página web donde se ha incrustado, por lo que no aplicará ninguna restricción causada por las cookies de terceros.

En esta captura de pantalla podemos ver que el dominio del código del widget es el mismo dominio que el de la página web donde está incrustado(the-crispy-cookie.com), por lo tanto, en este caso las cookies dejan de ser de terceros, por lo que no aplica la restricción de las cookies de terceros.

Importante: La posibilidad de configurar un dominio propio en la promoción solamente está disponible en la versión Marca Blanca, no está disponible en promociones creadas con la versión Premium.

 Solución 2: PARA PROMOCIONES PREMIUM (y MARCA BLANCA). Fuerza la apertura de la promoción fuera de la web principal

En este caso, se podrá embeder la página de Bienvenida de la promoción, pero cuando el usuario haga clic en el botón "Participa", la promoción abrirá la siguiente pantalla fuera de la web donde está incrustada la promoción, porque la URL del widget y la URL de la página web donde está incrustado  el widget no son del mismo dominio, por lo que al forzar la apertura fuera del widget se minimizan las incidencias y maximizamos las experiencia de usuario y las conversiones.

Éste es siempre el comportamiento for defecto en navegadores para dispositivos móviles y no se puede modificar. Esto permite garantizar una experiencia óptima del usuario, tal y como explicamos aquí.

En dispositivos desktop éste es también el comportamiento recomendado, por lo que para asegurar este comportamiento el administrador deberá verificar los siguientes puntos:

1. Asegurar que la página de Bienvenida de la promoción está publicada. Este paso es imprescindible, pues es el botón "Participa" que aparece en esta página de inicio de la promoción la que tiene el comportamiento de forzar la apertura de la siguiente pantalla fuera de la web.

La página de Bienvenida está publicada cuando el botón aparece de la siguiente forma:

2. Asegurar que no tenemos marcada la opción "Abrir la página de participación dentro del widget en navegadores de escritorio", que se encuentra en el apartado Recursos de publicación > Widgets:

B. Otras incidencias

A continuación enumeramos otras incidencias que pueden darse en el caso de haber incrustado una promoción en una página web propia:

1. Aparece pantalla de error tras hacer login con Facebook y/o Google

2. Error: “jQuery is not defined” o “$ is not defined”

3. Mi Wordpress no acepta el tag <iframe/>

4. Las ventanas emergentes y popups quedan desplazados

1. Aparece pantalla de error tras hacer login con Facebook y/o Google

Incidencia: Al intentar hacer Login Social, le aparece un pantalla de conexión rechazada. Por la propia política de seguridad de redes sociales, el Login con una cuenta de Google no está soportado dentro de un iframe. Es por este motivo que en caso que la promoción esté incrustada en una página y tenga configurado que la página de participación abra dentro del widget en navegadores desktop, cuando el usuario intente hacer clic en un Login Social le generará el siguiente error:

Solución: Si se quiere mantener el Social Login, se deberá forzar que la página de la participación de la promoción abra fuera del widget, tal y como explicamos en la Acción 2 de este tutorial.

2. Error: "jQuery is not defined" o "$ is not defined"

Incidencia: Al inspeccionar el código fuente de la página donde está incrustado el widget la consola muestra el error "jQuery is not defined" o "$ is not defined":

Solución: Para solucionarlo, se deberá añadir el siguiente código en la parte superior del código del widget:

<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

3. Mi Wordpress no acepta el tag <iframe /> 

Incidencia: Algunas versiones de Wordpress no admiten el tag <iframe /> per defecto y es necesario convertirlo al tag [iframe /].

Ejemplo:

El código por defecto es:

<iframe class="_widget" src="https://a.cstmapp.com/p/948383?micro=1&utm_source=widget&utm_medium=embed" width="100%" height="300" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true"></iframe>

Solución: En este caso, habrá que cambiar el código del widget por el siguiente:

[iframe class="_widget" src="https://a.cstmapp.com/p/948383?micro=1&utm_source=widget&utm_medium=embed" width="100%" height="300" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true"][/iframe]

4. Las ventanas emergentes y popups quedan desplazados

Incidencia: Si el alto del widget supera al alto de la zona visible de la pantalla, es posible que algunas ventanas flotantes queden fuera de la zona visual del usuario. Estas ventanas flotantes se centran verticalmente respecto a la altura del widget, por lo que no recomendamos que los valores de "altura máxima" del widget superen el 100%. Este valor indica que, como mucho, el widget tendrá la altura de la ventana del usuario. Esto hará que las ventanas emergentes siempre sean visibles al aparecer y no lleven al usuario a confusión.