Instalando su Programa de Referidos en Drupal

Si está en esta sección, estamos asumiendo que ya ha personalizado una plantilla para su programa de referidos en nuestro Centro de Diseño. Si aún no ha hecho esto, por favor valla a nuestro Centro de Diseño y  personalice su plantilla para el programa de referidos antes de continuar leyendo este guía. 


¿Quién debe leer esta guía?

Esta guía es para clientes con un sitio Web de Drupal. Si desea instalar un programa de referidos en su sitio Web de Drupal, por favor continue leyendo. 


Your Drupal website homepage where we will install a referral program


Comenzando la integración de Drupal con Genius Referrals

Para cargar en su Drupal la plantilla y herramientas de Genius Referrals para el programa de referidos, necesitará agregar scripts en algunas de las páginas de su sitio o agregar algunos snippets en el código del actual tema de su Drupal. Por ejemplo si quiere crear alguna referencia para uno de sus promotores cuando alguien lo contacte, necesitará agregar un script específico en su formulario de contacto. De la misma manera si alguien también se registrará en su sitio.


En la siguiente sección vamos a explicar en detalles algunos ejemplos para cada uno de los escenarios que usted pudiera tener en su sitio web.

Para obtener cada uno de los script específicos le vamos a pedir a Genius Referrals que los genere para la integración. Para eso necesitamos ir a la sección del Centro de Diseño y seleccionar un plantilla específica de la lista para obtener el código que debemos agregar a las páginas de Drupal.

Getting the code snippets for your referral program

Luego haga clic en el botón “Get me the code”

Getting the script to install your refer and earn program on Drupal

La imagen debajo nos muestra el código generado para cada uno de los diferentes escenarios que pudiera tener en su sitio de Drupal.

Genius Referral code snippets to install on Drupal for your referral program



Cargando la plantilla Full Widget en su página para el programa de referidos

Para cargar la plantilla de Genius Referrals crearemos una nueva Página Básica y la llamaremos “Refer and Earn” y luego le agregaremos los script necesarios. Debajo se muestra el código generado por  Genius Referrals.


Installing your referral template on your website

Debajo se muestra como se ve el código finalmente. Para pegar en el editor el código generado por Genius Referrals, seleccionar Text format “Full HTML”.

Genius Referrals installed on your Drupal

Aquí puede ver mejor un aumento del código.

Codes snippets needed to install a referral program on drupal


Fragmento de Código

<span class="gr_full_widget_design">&nbsp;</span>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.0.6.js" type="text/javascript"></script>
<script type="text/javascript">
     var toolbox = new grToolbox();    
     toolbox.loadTemplate({
          "grUsername" : "demo@geniusreferrals.com",
          "grTemplateSlug": "my-drupal-default"});
</script>
    

Una vez que el código está listo, necesitará hacer clic en el botón “Save” y cargar la página “Refer and Earn”, entonces podrá ver su plantilla de  Genius Referral.

Look how your refer a friend program is been loaded on your referral program


Configurando el script de su página de aterrizaje

Para la configuración de su página de aterrizaje crearemos una nueva página y le llamaremos “Landing Page”. Debajo está el script generado por Genius Referrals.

Code snippet needed to catch new referrals on your refer an earn program


Recuerde, para pegar el código generado por Genius Referrals, necesita seleccionar Text format “Full HTML”. La imagen debajo muestra la página.

Catching new referrals on your website with your refer and earn program


Fragmento de Código

<p>This is my landing page.</p>

<script src="https://www.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.0.6.js" type="text/javascript"></script>
<script type="text/javascript">
    var toolbox = new grToolbox();
    toolbox.catchReferrer();
</script>    

Hay algo más que chequear en el “Landing Page”. Cuando usted configuró su widget package en Genius Referrals uso una URL de aterrizaje específica para cuando alguien haga clic en los vínculos compartidos de sus promotores, así que la URL de su página de aterrizaje en su campaña debe ser la misma que la URL del “Landing Page” de D'rupal. Vamos a echar un vistazo en la configuración de los paquetes de widget de Genius Referrals y vamos a chequear eso. Miremos la imagen debajo.


Choose the proper landing page for your refer a friend program

Picking up the perfect landing page for your refer and earn program

Como puede ver las URL coinciden. Cuando alguien haga clic en la URL personal de algunos de sus promotores en las redes sociales, este será redirigido a su página de aterrizaje, entonces el promotor será capturado por el sistema para una referencia futura. Para este ejemplo vamos a tomar la URL personal de uno de sus promotores, luego vamos a navegar para ver el resultado final.

Choosing the proper referral tools on your refer a friend program

Si tomamos la URL personal del promotor y la pegamos en el navegador Genius Referrals lo va a redirigir a la página de aterrizaje, entonces el promotor será capturado por el sistema en una cookie. Echemos un vistazo a todo el proceso.

Checking the advocate data on your Drupal website

Hasta ahora el flujo de la página de aterrizaje está funcionando. Como puede ver ha sido redirigido para dicha página. Así que el próximo chequeo seria ver si el Sistema capturó al promotor en una cookie. Si abrimos la herramienta inspector de elementos del navegador y vemos la cookie todo estará bien.

Inspecting how the advocate data is store on your cookies

¡Excelente! Si ve la cookie que se muestra en la imagen, su página de aterrizaje está bien ¡Felicitaciones!



Configuración del script de la Página de Registro

Drupal tiene su propio flujo de registro. Eso es suficiente para que un usuario pueda registrarse en el sistema, asi que lo único que queda por hacer es agregar los scripts necesarios a la página de registro. Para hacer eso necesitaremos modificar el codigo del tema actual de Drupal y agragar alguna función al mismo. La única responsabilidad de dicha función será cargar los script necesarios para subcribirse al envio del del formulario de registro y generar el referido en Genius Referrals.



Creando el Script

Para crear el script, tenemos que ir al directorio del tema actual de Drupal (c:\xampp\apps\drupal\htdocs\themes\bartik), entonces una vez que estemos allí crearemos una carpeta "js", entoces dentro de la misma vamos a crear un fichero JavaScript y lo vamos a llamar "genius.referrals.js". Debajo podra ver el contenido del fichero.

NOTA


Para este ejemplo estamos usando "xampp", esa es la razón por la que estamos trabajando con directorios locales, pero si usted esta usando un dominio publico, usted debera crear este fichero en su hosting remoto. También, para este ejemplo, el nombre del tema de Drupal es "bartik", asi que debera utilizar el nombre del tema que tenga activo en su Drupal.


genius.referrals.js


jQuery( document ).ready(function() {
    
    /*
    * Subscribing to Register Form Submit
    */
    jQuery("#user-register-form").submit(function(event){
        
        var toolbox = new grToolbox();   
         toolbox.processCustomer({         
                "grUsername" : "demo@geniusreferrals.com",         
                "grTemplateSlug": "my-drupal-default",         
                "grCustomerName": jQuery('#edit-name').val(),         
                "grCustomerLastname": jQuery('#edit-name').val(),         
                "grCustomerEmail": jQuery('#edit-mail').val(),         
                "grCustomerCurrencyCode": "USD",         
                "grCanRefer": false    });    
         event.preventDefault();          
         var form = this; 
         setTimeout(function(){form.submit(); }, 2500); 
    });
});


NOTA

La función processCustomer define tres parámetros (nombre, apellidos y correo electrónico) pero si esos parametros no son capturados en el formulario de registro, puede pasar el correo electrónico en su lugar.


 

Cargando los scripts

To load Genius Referrals Script and the above script we need to add a function inside (c:\xampp\apps\drupal\htdocs\themes\bartik\template.php) file located on "bartik" folder. So, add the following snippet inside this file.

Para cargar el script de Genius Referrals y el script que mostramos arriba necesitamos agregar una función dentro del fichero (c:\xampp\apps\drupal\htdocs\themes\bartik\template.php) localizado dentro de la carpeta "bartik". Asi que agreguele el sigiente fragmento.


........

function bartik_preprocess_page(&$variables) {
    
  /**
  * Adding custom javaScript
  */
  
  drupal_add_js('https://www.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.0.6.js', 'external');
  drupal_add_js(drupal_get_path('theme', 'bartik') .'/js/genius.referrals.js');
}
........

NOTE

Si Drupal no carga los scripts cuando se carga la pagina de registro, entoces nosotros le recomendamos limpiar la cache de Drupal haciendo clic en el boton  "Clear all caches" situado en (Administración > Configuración > Desarrollo > Rendimiento).

Así cuando un usuario se registre en su Sitio, se generará una referencia para el promotor capturado en su página de aterrizaje anteriormente. Vamos a ver el código fuente de la página “Register Page” para asegurarnos que los nombres de los campos son los mismos que le pasamos a la función.

Finding out what parameters to use on your referral program

Como puede ver tomamos los ids de los campos para obtener los valores de los mismos y pasarlos a la función processCustomer. Debajo hay una imagen que muestra como son capturados los datos del formulario de registro. 

Register form for catching new referrals on your referral program

Registration confirmation

Así que si todo está bien cuando usted chequee la página de “Refer and Earn” debe haber una referencia asignada al promotor correspondiente capturado en la página de aterrizaje, debido a que un usuario se ha registrado en el Sistema. La imagen debajo muestra la referencia de la que estamos hablando.

checking the amount of referral the advocate has generated


Configuración de la “Página de Contacto” para capturar nuevos referidos

Joomla ya tiene una página de contacto. La única cosa que debe hacer es configurarla, así podra capturar nuevos referidos. Entonces, para este proceso necesitamos habilitar el modulo contacto, despues crear las categorias que necesitara y establecer los permisos para definir quienes podran usar el Formulario de Contacto. Una vez que tenga el formulario listo, vamos a agregar los fragmentos de código de Genius Referrals al fichero "genius.referrals.js" para subscribirse al envio del formulario. Así cuando un usuario envíe un mensaje desde el formulario, el Sistema generará una nueva referencia (si es necesario) para el promotor.

Usando el formulario de Contacto para capturar nuevos referidos

Como se ha explicado anteriormente, usted puede capturar nuevos referidos usando cualquier tipo formulario, y solo necesita un fomulario para capturar referidos. De acuerdo con las necesitades de su negocio usted debe decidir si usa el formulario de registro, el formulario de contacto o otro formulario para capturar nuevos referidos. 



Para habilitar el modulo de contacto dirijase a (Administración > Modulos) y habilitelo chequiando el cuadro y salvando los cambios. 

Enabling drupal contact module


Sólo tienes una forma de contacto pero puede mostrar una lista desplegable de "Categorías" dependiendo del tipo de problema que el usuario necesite ponerse en contacto con usted. Los resultados de la forma para cada categoría se pueden enviar por correo electrónico a una dirección diferente. Para utilizar las categorías, haga clic en (Administración > Estructura > Formulario de contacto). 

Configuring the contact form for your referral program

Cree una nueva categoría y nombrela "Manager". Clic en salvar. Chequee la imagen debajo.

Create a new category

In order to allow people to use this contact form, you will need to give them permissions to do so. Click (Administration > People > Permissions), locate the "Contact module" entry and enable it for the roles that will use Contact. Save your changes. The menu link (next step) will not be visible to anyone not having access.

Con el fin de permitir que la gente utilice este formulario de contacto, usted tendrá que darles permisos para hacerlo. Haga clic en (Administración> Gente> Permisos), busque la entrada "Módulo de contacto" y habilitelo para los roles que podran utilizarlo. Guarde los cambios. El menú de contacto (siguiente paso) no será visible para cualquiera que no tenga acceso.

Setting contact form permissions

If you want your contact form to appear in a menu, go to (Administration Structure > Menus > Navigation > List links). Click on the "enable" checkbox at the right of the contact item, click on "Save" at the bottom. Then click on "edit" at the right of the contact item, and in "Parent link" choose Main menu. Thanks to the "weight" you can choose at what place the item will appear in the menu.

Si usted quiere que su formulario de contacto aparezca en el menú, vaya a (Administración> Estructura> Menús> Navegación> Lista Enlaces). Haga clic en la casilla "activar" a la derecha del punto de contacto, haga clic en "Guardar" en la parte inferior. Luego haga clic en "editar" en la parte derecha del elemento de contacto, y en "enlace de Padres" elija el menú principal. Gracias al "peso" se puede elegir en qué lugar aparecerá el elemento en el menú.

Adding contact form to Main Menu

Lo único que queda por hacer es actualizar el fichero "genius.referrals.js" con el fragmento de codigo para el formulario de contacto. Debajo podra ver la ultima versión del fichero.

genius.referrals.js

jQuery( document ).ready(function() {
    
    /*
    * Subscribing to Register Form Submit
    */
    jQuery("#user-register-form").submit(function(event){
        
        var toolbox = new grToolbox();   
         toolbox.processCustomer({         
                "grUsername" : "demo@geniusreferrals.com",         
                "grTemplateSlug": "my-drupal-default",         
                "grCustomerName": jQuery('#edit-name').val(),         
                "grCustomerLastname": jQuery('#edit-name').val(),         
                "grCustomerEmail": jQuery('#edit-mail').val(),         
                "grCustomerCurrencyCode": "USD",         
                "grCanRefer": false    });    
         event.preventDefault();          
         var form = this; 
         setTimeout(function(){form.submit(); }, 2500); 
    });

    /*
    * Subscribing to Contact Form Submit
    */
    jQuery("#contact-site-form").submit(function(event){
        
        var toolbox = new grToolbox();   
         toolbox.processCustomer({         
                "grUsername" : "demo@geniusreferrals.com",         
                "grTemplateSlug": "my-drupal-default",         
                "grCustomerName": jQuery('#edit-name').val(),         
                "grCustomerLastname": jQuery('#edit-name').val(),         
                "grCustomerEmail": jQuery('#edit-mail').val(),         
                "grCustomerCurrencyCode": "USD",         
                "grCanRefer": false    });    
         event.preventDefault();          
         var form = this; 
         setTimeout(function(){form.submit(); }, 2500); 
    });
});
Asi es como luce el código finalmente. Al igual que el Formulario de Registro vamos a tomar los campos del Formulario de contacto para pasárselos como parámetros a la función processCustomer Genius Referrals. Una vez que el formulario es enviado, las entradas (edit-name and edit-mail) son tomadas del formulario y enviadas a Genius Referrals. Entonces cuando un mensaje ha sido enviado, una referencia será generada para el promotor capturado en su “Landing Page” anteriormente. Vamos a echarle un vistazo al código fuente de Contact Us para asegurarnos que los ids de los campos son los mismos pasados a la función processCustomer.

Fishing the referral data from the form on your refer a friend program

Como puede ver, utilizamos los ids de los campos del formulario para tomar los valores de estos y entonces pasarlos a la función processCustomer. Debajo se muestra el Formulario de Contacto.
capturing new referrals in your contact form on your refer a friend program

capturing new referrals on your refer and earn program

Si el código está correcto cuando un usuario envié un mensaje, otra referencia se generará para el promotor (si es necesario) capturado en el Sistema anteriormente. Así que vamos a ir a la página “Refer and Earn” de nuevo para ver las estadísticas. Debajo se muestra la nueva referencia de la que estamos hablando..

Checking the amount of referrals the advocates has generated for your referral program

¡Excelente! Ahí tiene la segunda referencia generada por el envió del mensaje. Así que como puede ver la integración con Genius Referrals es fácil. Básicamente dondequiera que usted desee generar una referencia para un promotor lo único que tiene que hacer es llamar a la función processCustomer y la misma será creada.




Recurso Extensión Tamaño



Por favor, deje sus comentarios o preguntas debajo