En Internet hay una gran mentira y todos parecen creerlo: todos odian las ventanas emergentes. Es cierto, pueden ser abusados, y a menudo lo son, pero eso no significa que no funcione. Así que construamos nuestra propia opción emergente para el formulario de correo electrónico personalizado de WordPress. Nota: ¿Qué es un opino emergente? Por lo general, es una forma simple que aparece cuando el visitante está tratando de abandonar su sitio o cuando interactúa con su sitio de una manera que tenga sentido para usted, reunir su correo electrónico de dirección. En cambio, puede ofrecer descuentos especiales, libros electrónicos, cupones, etc. a sus nuevos suscriptores. También se llama plomo magnético; El soborno utilizado a cambio de una dirección de correo electrónico.
Supongamos, para el propósito de este tutorial, que vende un producto por valor de $ 50 en su sitio y que tiene 1000 visitantes diariamente. La tasa de rechazo/abandono es de aproximadamente el 50%, lo que significa que 500 de esos visitantes se pierden para siempre. Con la detección de la intención de salida (más sobre esto pronto), puede intentar recibir su correo electrónico para futuras persecuciones y promociones. Suponiendo que el 10% de sus visitantes casi perdidos le ofrecen, eso significa que reúne 50 correos electrónicos al día, alrededor de 1500 al mes. Con 1500 correos electrónicos por mes, puede obtener fácilmente una tasa de conversión del 5% (con un correo electrónico de marketing inteligente), lo que significa 75 ventas adicionales por mes, lo que resulta en un ingreso mensual adicional de $ 3,750.
¿Todavía crees que las ventanas emergentes son una mala idea?Bueno, no crees que la palabra: ¡las personas de Crazy Egg hicieron un análisis exhaustivo de las formas optinas y el comportamiento de los visitantes y han descubierto resultados sorprendentemente geniales!¡Y Chris Lema está de acuerdo!Este tutorial no se tratará de por qué (vea el artículo Crazy Egg anterior para esto), sino sobre cómo: construiremos su propio formulario de registro personalizado con la intención de salida que, una vez enviada, enviará a los visitantes a un proveedor externo, como MailChimp. .
Paso 1: Descargar y configurar el script de detección de intención de salida es un momento del viaje de sus visitantes a través de su sitio. Cuando decido irme por cualquier motivo y debemos detectarlo. Afortunadamente, es bastante fácil hacer esto con un poco de ayuda de una solución de JavaScript, llamada Ouibunce. Descargue OIibunce.js y guárdelo en el directorio JS dentro del tema, luego cree otro JavaScript Ouibunce-Config.js, que usará para configurar el comportamiento de la ventana emergente. Pegue el siguiente código en este archivo recién creado: jQuery (function ($) {“use estrictamente”; ouibunce ($ (#js-optin-wrap ‘) [0], {// Uncomment the siguiente si desea el modal a Aparece cada vez // más opciones aquí: https://github.com/carlsednaoui/ouibunce agresivo: truewide: true,}); {event.preventDefault (); $ (this) .val (‘sub -scribble … ‘). prop (‘ discapacitado ‘); var data = {‘ Action ‘:’ Process_optin_submission ‘,’ nonce ‘: window.ouiboun.,’ Correo electrónico ‘: $ (‘#js-optin-cemail ‘). Val () };); // manejar la respuesta (¡cuide el informe de error!)});;});
Ouibunce no ofrece ninguna funcionalidad del formulario: solo detecta la intención de salir y muestra cualquier elemento que pase como un primer argumento, por lo que necesita configurar la forma del formulario con JQuey y un Ajax Dash (lea el oficial Documentación Para actualizar su conocimiento de cómo funciona AJAX en WordPress). En el backstage, establezca una cookie (cuyo tiempo puede configurar), de modo que el formulario solo aparece una vez al mes a un visitante para minimizar el riesgo de ser realmente intrusivo. Entonces, ¿qué está haciendo el guión arriba? Recuerde un oyente en forma del formulario, luego haga una llamada AJAX una vez que haga clic en ese botón. A una respuesta exitosa, oculte el campo introductorio y agradezca al visitante por la suscripción. Nota: Este es un ejemplo muy simple que solo tiene un campo (correo electrónico) y sin validación. Dejaré que su discreción se encargue de ello.
Además, preste atención al parámetro agresivo, si se establece, activará la ventana emergente cada vez que un visitante intente salir de su sitio, lo más probable es que moleste a sus visitantes, por lo que le recomiendo que desactive en el entorno de producción. Paso 2: Cree un script de procesamiento ya que realiza una llamada AJAX, necesita un script para capturarlo y procesar su solicitud y, ya que soy un gran fanático de la programación orientada a objetos, para crear una clase para esto; Esta clase tendrá dos funciones (llamadas métodos), uno para procesar la demanda y la otra para mostrar nuestro HTML emergente:
$ _post [‘correo electrónico’]); $ curl = curl_init (); Curl_setop_array ($ curl, array (curlop_htttphen => array (‘content -type: application/json’, ‘I Acept: Application/Json’), // -h Parámetro en una variable curlopt_url => ‘http: // reqr. s/pi/users ‘, // the Endpoint curlopte_post => 1, // -x post curlop_userpwd =>’ app_id: api_key ‘, // -u parámetro (no siempre necesario) curlopt_postfields => json_encode ($ date) // Porque tenemos un tipo de contenido a JSON); $ respi = curl_exec ($ curl); curl_close ($ curl); print_r ($ respi); wp_die (); } Public function render () {?>

hey allí! ? ¡SUSCRIBIR! />
no gracias.

Cerrar.
< Todo lo que hace es eliminar el código HTML de la ventana emergente. Idealmente, estaría en un archivo separado, pero para el propósito de este tutorial, funcionará. Recuerde los atributos de identificación que comienzan con JS-: esta es una convención hermosa para recordar que se utiliza un selector particular para JavaScript/jQuery y no para el estilo. Forma Pop-Up/Ritet de Ferestra tiene un campo de entrada (correo electrónico), un botón de referencia y un enlace de cierre. También tiene dos pasos, el segundo se muestra una vez que se envía el formulario y se devuelve la respuesta. La primera parte de la clase (el método Process ()) es el lugar donde las cosas se vuelven interesantes; En primer lugar, verificamos si NonCe es válido (una buena práctica de seguridad) e iniciamos una llamada Curl. Para aquellos que no saben, Curl es el equivalente programático de cómo se comunica su navegador con el servidor: ingrese una URL en la barra de direcciones, que crea una solicitud, y el servidor devuelve una respuesta, que su navegador interpreta. Curl hace lo mismo, pero sin un navegador, crea una solicitud y analiza la respuesta.
Si bien este enfoque puede parecer un poco confundido al principio, la mayoría (si no todos) los proveedores de marketing de correo electrónico importantes ofrecen API (URL con las que las computadoras pueden hablar, como WordPress XML-RPC). En el caso de nuestro ejemplo, utilizo un servicio de req | res falso, pero en nuestra solución en vivo, llamo a nuestro sistema de asistencia al cliente, Intercom. Mirando lo que hace su código, verá una serie de configuraciones que comienzan con CurLopte_; Estas son la configuración con la que realiza la llamada de curl: curlopt_httphen establece las solicitudes, como el tipo de contenido que envía y espera.

Curlopt_returntransfer asegúrese de sorprender la respuesta en una variable
Curlopt_url está bien, la URL a la que haces una llamada
Curlopte_post establece el tipo de llamada a la publicación
Curlopt_userPWD es un parámetro opcional si tiene que usar las credenciales de API para iniciar sesión con éxito, y en la mayoría de los casos, hágalo.
Curlopt_postfields son sus datos normalizados, en nuestro caso, es solo una dirección de correo electrónico, pero puede tener cuántos campos desea, siempre que el servicio API los acepte.
Con su llamada ahora configurada, es hora de hacerlo de manera efectiva, por lo que las últimas líneas de nuestro método hacen esto, luego cierran, impriman los datos (que nuestro JavaScript es capaz de leer) y evitan que PHP haga cualquier otra cosa con wp_die () .
Paso 3: Cargue sus scripts en WordPress ahora que tiene todas las características necesarias, es hora de grabar todas las Escrituras de WordPress, para las cuales solo tiene que agregar el siguiente código en funciones.php: /*** Cargar Optin Form Class y Déjelo renderizar justo antes de */ requerir get_template_directory (). ‘/inc/class- optin-form.php’; $ opin_form = new Opin_Form (); add_action (‘wp_footer’, array ($ opin_form, ‘render’)); /** * Enqueue todos los scripts de necesidad y establezca variables de JavaScript adecuadas */function enqueue_ouibunce () {wp_enqueue_script (‘oiibunce’, get_stylesheet_rire_uri (). ‘/Js/ouibunce’, array (); wp_enqueue_script (‘oiibunce-config’, get_stylesheet_directory_uri (). wp_localise_script (‘oiibunce-config’, ‘ouBounuiers’, array (‘ajaxurl’ => admin_url (‘admin-AJAX.PHP’), ‘nonce’ => wp_create_nonce (‘ouibunce’))); } add_action (‘wp_enqueue_scripts’, ‘enqueue_ouibunce’); La primera parte de este código carga la clase e instantáneamente para que pueda ejecutar el método render (): esto elimina el pop html justo antes de la etiqueta de cierre.
La segunda parte coloca todos los JavaScripts en la cola y establece algunas variables a través de wp_localise_cript (). Ahora, antes de que pueda probar esto, debe estilizar su ventana emergente o, lo que es más importante, esconderla para que aparezca una vez. Paso 4: Afinar su ventana emergente Aquí hay algunos estilos básicos para la ventana emergente que puede usar como punto de partida: .modal-cover {Display: None; Antecedentes: RGBA (0, 0, 0, 0.75); Posición: fijo; Arriba: 0; Izquierda: 0; Derecha: 0; Abajo: 0; Índice Z: 1000; Top-top: 20px; } / * ouibunce agrega la clase ‘OIibunce-Open’ en la etiqueta * / .ouibunce -open .modal-coover {display: block; } .Modal {ancho: 600px; margen: 0 coche; Antecedentes: #fff; } Lo más importante a tener en cuenta aquí es que la cubierta moderna (nuestro envoltorio emergente) está oculto de forma predeterminada y solo se revela una vez que OboAunce se desencadena, cuando esto sucede. Se agrega a la etiqueta “, revelando el modal. El resultado final se ve así: nuestra ventana emergente para el formulario de correo electrónico de DIY y conclusión de WordPress en este momento, es posible que se pregunte por qué necesita todas las soluciones alojadas (e incluso caras) disponibles en el mercado. Bueno, dependiendo de sus necesidades, es posible que necesite la siguiente funcionalidad que nuestra solución de bricolaje no ofrece:
Prueba A/B para mejorar la efectividad de las ventanas emergentes aún más
Otros tipos de detección (por ejemplo, mostrar una vez que un visitante se ejecuta en un punto en particular o pasa más tiempo en una página en particular)
Formulario Generador para agregar fácilmente imágenes, campos y botones, todo con la simplicidad de la punción y los clics prefabricados y para elegir, para que no tenga que pasar tiempo con el diseño.

Formularios con múltiples pasos en ventanas emergentes
Soporte móvil, que se está volviendo cada vez más popular
Integración automática con otros servicios de tercera parte
Todo se reduce a sus necesidades y preferencias: para nosotros, muchos de ellos son importantes, pero decidimos integrarnos, lo que requiere tiempo y, lo que es más importante, dinero.Si solo desea comenzar rápidamente y no es muy técnico, vaya con OptinMonster porque ha leído todo el tutorial y estoy seguro de que está impaciente para comenzar, he preparado una idea para tomar el código y comenzar a jugar con él.