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 Creador de Plantillas. Si aún no ha hecho esto, por favor vaya a nuestro Centro de Diseño y personalice su plantilla para el programa de referidos antes de continuar leyendo 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 continúe leyendo.
¿Quién debe leer esta guía?
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 de Integraciones- Code Snippets-Instalación.
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 de Integraciones- Code Snippets-Instalación.
Sección de Integración-Instalación a través de la cual instalará su programa de referidos.
Si ya estamos en la sección de instalación, podemos notar que contamos con 4 opciones para instalar el programa Código embebido, Ventana modal, Burbuja flotante y Control deslizante. Teniendo en cuenta los detalles de su tienda, puedes escoger la que desea y se adapte mejor a sus necesidades. Una vez que selecciona una de las opciones, tendrá acceso al fragmento de código correspondiente para instalar la plantilla del Programa.
Para las opciones ventana modal, burbuja flotante y control deslizante, incluyen una sección de configuración donde podrá personalizar algunos detalles como el estilo y la ubicación.
Para las opciones ventana modal, burbuja flotante y control deslizante, incluyen una sección de configuración donde podrá personalizar algunos detalles como el estilo y la ubicación.
Opciones de instalación.
Sigue las instrucciones y obtendrá el código correspondiente a cada caso.
Código Embebido
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page"> </span>
<script type="text/javascript">
!function(){
const grSetting={
"grTemplateSlug": "referral-program-home-page",
"grCustomerCurrencyCode": "USD",
"grLanguage": "es",
"grInstallMethod":"embeddedcode"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS CODE SNIPPET -->Ventana Modal
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page"> </span>
<script type="text/javascript">
!function(){
const grSetting={
"grTemplateSlug": "referral-program-home-page",
"grCustomerCurrencyCode": "USD",
"grLanguage": "en",
"grInstallMethod":"modal"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS CODE SNIPPET -->Burbuja Flotante
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page"> </span>
<script type="text/javascript">
!function(){
const grSetting={
"grTemplateSlug": "referral-program-home-page",
"grCustomerCurrencyCode": "USD",
"grLanguage": "en",
"grInstallMethod":"bubble"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS CODE SNIPPET -->Cargando la plantilla Portal del Promotor 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 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
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
Para obtener el fragmento de código iremos a la sección de Integraciones-Code Snippets-Seguimiento de Conversiones-Escenarios. En esta sección puede encontrar una selección de escenarios que se ajustan a sus necesidades, debe seleccionar el que se aplique a su sitio web. Según el que se escoja varían los pasos a seguir y los fragmentos a instalar. Para esta guía se escogió el escenario E004.
Configuración de los scripts de Seguimiento y Conversión.
Obtener los fragmentos de código para realizar el seguimiento y conversión.
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.
Catching new referrals on your website with your refer and earn program
Fragmento de Código
<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
grCookieLifeTime:"180"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.catchReferrer(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->
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 Drupal. 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
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, así que lo único que queda por hacer es agregar los scripts necesarios a la página de registro. Para hacer eso necesitaremos modificar el código del tema actual de Drupal y agaragar alguna función al mismo. La única responsabilidad de dicha función será cargar los script necesarios para subscribirse al envió 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", entonces dentro de la misma vamos a crear un fichero JavaScript y lo vamos a llamar "genius.referrals.js". Debajo podrá ver el contenido del fichero.
i
NOTA
Para este ejemplo estamos usando "xampp", esa es la razón por la que estamos trabajando con directorios locales, pero si usted está usando un dominio público, usted deberá crear este fichero en su hosting remoto. También, para este ejemplo, el nombre del tema de Drupal es "bartik", así que deberá utilizar el nombre del tema que tenga activo en su Drupal.
Para este ejemplo estamos usando "xampp", esa es la razón por la que estamos trabajando con directorios locales, pero si usted está usando un dominio público, usted deberá crear este fichero en su hosting remoto. También, para este ejemplo, el nombre del tema de Drupal es "bartik", así que deberá 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);
});
});i
NOTA
La función processCustomer define tres parámetros (nombre, apellidos y correo electrónico) pero si esos parámetros no son capturados en el formulario de registro, puede pasar el correo electrónico en su lugar.
La función processCustomer define tres parámetros (nombre, apellidos y correo electrónico) pero si esos parámetros no son capturados en el formulario de registro, puede pasar el correo electrónico en su lugar.
Cargando los scripts
........
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');
}
........i
NOTA
Si Drupal no carga los scripts cuando carga la página de registro, le recomendamos que borre la memoria caché de Drupal haciendo clic en el botón "Borrar todas las memorias caché" ubicado (Administración> Configuración> Desarrollo> Rendimiento).
Si Drupal no carga los scripts cuando carga la página de registro, le recomendamos que borre la memoria caché de Drupal haciendo clic en el botón "Borrar todas las memorias caché" ubicado (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 cómo son capturados los datos del formulario de registro.
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í podrá capturar nuevos referidos. Entonces, para este proceso necesitamos habilitar el módulo contacto, después crear las categorías que necesitara y establecer los permisos para definir quiénes podrán 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 suscribirse al envío 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.
i
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 formulario para capturar referidos. De acuerdo con las necesidades de su negocio usted debe decidir si usa el formulario de registro, el formulario de contacto o otro formulario para capturar nuevos referidos.
Como se ha explicado anteriormente, usted puede capturar nuevos referidos usando cualquier tipo formulario, y solo necesita un formulario para capturar referidos. De acuerdo con las necesidades 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 diríjase a (Administración > Modulos) y habilitelo chequeando 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 nómbrala "Manager". Clic en salvar. Chequee la imagen debajo.
Create a new category
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 habilítalo para los roles que podrán utilizarlo. Guarde los cambios. El menú de contacto (siguiente paso) no será visible para cualquiera que no tenga acceso.
Setting contact form permissions
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
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.
Si el código está correcto cuando un usuario envie 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.