Fanplayr Docs

Español

English
日本語
Italiano

Español

English
日本語
Italiano

Appearance

API de JavaScript ​

Inicializar la biblioteca ​

Pega esta etiqueta de script HTML dentro de la etiqueta <head> de tu página, reemplazando WRITE_KEY y ENDPOINT con la clave de escritura y el endpoint generados por la integración que creaste.

html
<script type="text/javascript">
  (function (r, t) {
    var e = window;
    var n = e[t];
    if (!n) {
      n = e[t] = [];
    }
    var a = [
      'identify',
      'page',
      'track',
      'flush',
      'setSessionId',
      'setUserId',
      'setConfig',
      'user.set',
      'user.setOnce',
      'user.unset',
      'user.increment'
    ];
    function s(r) {
      var e = r.split('.');
      var a = e[0];
      var s = n;
      if (e.length === 2) {
        s = n[a] = n[a] || {};
        a = e[1];
      }
      s[a] = function () {
        var t = [r];
        t.push.apply(t, Array.prototype.slice.call(arguments));
        n.push(t);
        return n;
      };
      s[a].toString = function () {
        return ''.concat(t, '.').concat(r, ' (stub)');
      };
    }
    for (var i = 0; i < a.length; i++) {
      var u = a[i];
      s(u);
    }
    n.init = function (e) {
      var a = r.createElement('script');
      a.type = 'text/javascript';
      a.async = true;
      a.setAttribute('data-fp-lib-name', t);
      a.src =
        typeof FANPLAYR_CUSTOM_LIB_URL !== 'undefined'
          ? FANPLAYR_CUSTOM_LIB_URL
          : 'https://cdn.fanplayr.com/cdp/fanplayr-latest.min.js';
      var s = r.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(a, s);
      n['_config'] = e;
      n['_snippetVersion'] = '1.0.4';
    };
    return n;
  })(document, 'fp360');

  fp360.init({
    writeKey: 'WRITE_KEY',
    endpoint: 'ENDPOINT',
    debug: true
  });
</script>

Una vez que el código anterior se haya ejecutado, el objeto fp360 estará disponible globalmente en tu JavaScript.

DANGER

La bandera debug es útil durante la implementación, pero se recomienda eliminarla para uso en producción.

Rastrear eventos ​

Una vez que tengas la biblioteca Fanplayr 360 en tu página, puedes rastrear un evento llamando a fp360.track con el nombre del evento y sus propiedades.

javascript
fp360.track('Product Viewed', {
  MyCustomAttribute: 'My Custom Attribute',
  $product: {
    name: 'Red Shoes'
  }
});

WARNING

Las llamadas de seguimiento pueden incluir Datos Semánticos. Si estás enviando atributos personalizados, siempre debes enviar pares simples de clave / valor, pero los Datos Semánticos pueden incluir objetos.

El ejemplo anterior utiliza un Objeto Semántico $product.

Gestión de sesiones ​

La biblioteca de JavaScript gestiona automáticamente los identificadores de sesión y de usuario. Si necesitas establecer manualmente un identificador de sesión o de usuario, por ejemplo, cuando utilices un servicio como PrivacyID, puedes llamar a lo siguiente:

javascript
// Establecer un identificador de sesión
fp360.setSessionId('<SESSION IDENTIFER>');

// Establecer un identificador de usuario principal
fp360.setUserId('<USER IDENTIFIER>');

Las sesiones finalizarán automáticamente después de 45 minutos desde el último evento enviado con un identificador de sesión dado.

INFO

Los IDs de usuario configurados aquí son diferentes de la Identidad de Usuario, y en general no tendrás que manejar nada de esto por tu cuenta.

Rastrear páginas ​

La llamada page te permite registrar cada vez que un usuario ve una página de tu sitio web, junto con cualquier propiedad opcional sobre la página.

javascript
fp360.page({
  type: 'home',
  name: 'My Page Title'
});

Cualquier valor puede ser proporcionado para type pero si usas uno de los siguientes puede ser utilizado para añadir funcionalidad a Insights.

  • "home"
  • "category"
  • "product"
  • "cart"
  • "search"
  • "blog"
  • "checkout"

Gestión de la identidad del usuario ​

Identidad principal ​

Por defecto, Fanplayr 360 genera un identificador único (UUID) para el usuario y lo almacena en el almacenamiento local (LocalStorage) del navegador. Puedes anular este identificador proporcionando tu propio valor único para el usuario.

javascript
fp360.setUserId('UNIQUE_USER_ID');

Identificadores secundarios ​

Los usuarios pueden interactuar con tu negocio utilizando múltiples dispositivos y, a menos que proporciones un identificador principal consistente para el usuario con el método setUserId, aparecerán como usuarios diferentes en cada dispositivo.

Si no puedes proporcionar un identificador principal inmediatamente al inicio de cada vista de página, una alternativa es proporcionar identificadores secundarios que Fanplayr 360 utiliza para vincular los identificadores principales entre sí. Estos se proporcionan como pares de "clave" y "valor" utilizando el método identify.

Por ejemplo, una dirección de correo electrónico o un número de programa de fidelización del cliente pueden ser buenos identificadores secundarios porque deben permanecer únicos para el usuario en diferentes dispositivos y sistemas dentro de tu negocio:

javascript
fp360.identify('email', 'user@example.com');

El ejemplo anterior asocia un identificador secundario con el usuario actual. Siempre que Fanplayr 360 vea dos usuarios (identidades primarias) con cualquiera de los mismos identificadores secundarios, vinculará a esos usuarios para que todos los eventos y atributos se asocien con el mismo perfil de usuario.

INFO

Está bien llamar a esto varias veces. Por ejemplo, es posible que desees llamarlo en cada vista de página para simplificar la implementación. La biblioteca de JavaScript se encarga de enviar datos solo si esto cambia.

WARNING

Si utilizas email o phone como identificador, estos se añadirán automáticamente como atributos de usuario semánticos $email y $phone. Además, estos identificadores se asignarán automáticamente a los identificadores: $email y $phone.

INFO

Todas las identidades de usuario se consideran automáticamente PII medias. Obtén más información sobre PII aquí.

Gestión del perfil de usuario ​

Los atributos se pueden establecer directamente en los usuarios utilizando la llamada user.set. También puedes establecer información solo si aún no se ha establecido utilizando la llamada user.setOnce, eliminar propiedades utilizando la llamada user.unset e incrementar un contador utilizando la llamada user.increment.

Establecer un atributo ​

javascript
fp360.user.set({
  $firstName: 'John',
  $lastName: 'Doe',
  favoriteColor: 'red'
});

En este ejemplo estamos rastreando dos atributos semánticos, los que comienzan con un $. Estos se utilizan dentro de nuestro sistema para añadir funcionalidad adicional.

También puedes establecer un solo atributo a la vez:

javascript
fp360.user.set('favoriteColor', 'green');

Establecer una vez ​

Si deseas establecer un atributo solo si aún no existe, puedes hacerlo:

javascript
fp360.user.setOnce({
  $firstName: 'Jan',
  favoriteColor: 'purple'
});

O un solo elemento a la vez:

javascript
fp360.user.setOnce("favoriteColor": "purple"})

Caducidad ​

A veces, es posible que desees establecer un atributo en un usuario que solo dure hasta una fecha y hora específicas. Puedes hacerlo enviando un objeto Date de JavaScript, una timestamp que represente el número de milisegundos desde la época, o una string en el formato YYYY-MM-DD HH:mm:ss.

Puedes establecer múltiples atributos a la vez, los siguientes ejemplos se asignan todos a la misma fecha y hora:

javascript
// objeto fecha js
fp360.user.set(
  {
    favoriteColor: 'red'
  },
  { expires: new Date('2022-01-01 12:23:01') }
);

// timestamp
fp360.user.set(
  {
    favoriteColor: 'red'
  },
  { expires: 1641057781000 }
);

// tiempo relativo
fp360.user.set(
  {
    favoriteColor: 'red'
  },
  { expires: '1day' }
);

O para un solo atributo:

javascript
fp360.user.set('favoriteColor', 'red', { expires: '5min' });

Para tiempos relativos, puedes usar un número entero seguido de cualquiera de los siguientes, aunque solo la primera letra necesita ser proporcionada:

  • segundo(s)
  • minuto(s)
  • hora(s)
  • día(s)
  • semana(s)
  • año(s)

Por ejemplo, para "3 minutos" a partir de ahora, podrías establecer expires en "3m", "3 minutes", etc.

Eliminación de un atributo ​

Puedes eliminar múltiples atributos de un usuario enviando las claves como un array:

javascript
fp360.user.unset(['favoriteColor', '$firstName']);

O un solo atributo simplemente por la clave:

javascript
fp360.user.unset('favoriteColor');

Incrementando un atributo ​

El incremento de un atributo se puede utilizar para añadir recuentos directamente a un usuario.

javascript
fp360.user.increment('numberOfGoodChoices');

Si el atributo aún no existe en el perfil del usuario, se establecerá en 1.

WARNING

Si ya existe un atributo con ese nombre y no es un entero, el valor también se establecerá en 1. Esto es cierto incluso si el valor es una cadena de "1" en lugar del valor real de 1. Además, los valores flotantes como 10.5 se restablecerán a 1 en la primera llamada de incremento.

También puedes incrementar un atributo en más de 1:

javascript
fp360.user.increment('numberOfGoodChoices', 10);

Gestión del consentimiento del usuario ​

El seguimiento del consentimiento del usuario es muy importante para cumplir con regulaciones como el GDPR y la CCPA, y es una buena práctica para mantener a tus usuarios satisfechos. Ofrecemos un amplio soporte para el seguimiento granular del consentimiento.

Añadir consentimiento ​

Añadir el consentimiento del usuario requiere, como mínimo, un type como "email" o "phone" y un value como "person@example.com".

javascript
fp360.consent.set('email', 'person@example.com');

Lo anterior simplemente indicaría que un usuario ha dado su consentimiento para ser contactado por tu empresa por correo electrónico a una dirección de correo electrónico determinada. No indica para qué purpose o topics específicos pueden estar interesados.

Añadir un propósito ​

javascript
fp360.consent.set('email', 'person@example.com', {
  purpose: [
    {
      type: 'marketing'
    },
    {
      type: 'transactional'
    }
  ]
});

El código anterior indicaría que el usuario ha dado permiso para ser contactado por correo electrónico, en una dirección específica, con el purpose de "marketing" y "transaccional" (correos electrónicos como confirmaciones de pedidos).

Añadir temas ​

A veces, tus usuarios solo quieren ser contactados para fines específicos, o sobre ciertos productos. Puedes indicarlo usando:

javascript
fp360.consent.set('email', 'person@example.com', {
  purpose: [
    {
      type: 'marketing',
      topics: ["Men's Clothing", "Men's Accessories"]
    }
  ]
});

El código anterior indicaría que un usuario ha dado permiso para ser contactado por correo electrónico, en una dirección específica, con el purpose de "marketing" pero solo sobre los topics "Men's Clothing" o "Men's accessories".

INFO

Establecer el consentimiento para un type / value que ya existe sobrescribirá el purpose y topics actuales; asegúrate de set siempre todas estas propiedades en cada llamada.

Eliminar el consentimiento ​

Eliminar el consentimiento de los usuarios es fácil y solo requiere un type y un value.

javascript
fp360.consent.unset('email', 'person@example.com');

Vaciar la cola de mensajes ​

Fanplayr 360 pone en cola y agrupa eventos y otros datos que se rastrean para optimizar las llamadas de seguimiento y reducir la carga de solicitudes de red para los visitantes de tu sitio web.

En algunos casos, es posible que necesites saber cuándo se han rastreado todos los mensajes para poder permitir la navegación a otras páginas. Por ejemplo, podrías estar rastreando un evento para representar el envío de un formulario y querer esperar a que el seguimiento se complete antes de dirigir al usuario a otra parte del sitio web. En este caso, utiliza la API flush:

javascript
fp360.track('Contact Form Submitted', {
  email: 'me@domain.com',
  message: 'Helloworld!'
});

fp360.flush(function () {
  // Los eventos de Fanplayr 360 se han rastreado con éxito y el usuario puede
  // ser dirigido a otra página.
});

Uso con Fanplayr Targeting ​

Fanplayr 360 se puede configurar fácilmente para rastrear datos que ya están siendo capturados por tu integración de Fanplayr Targeting. Esto funciona de la siguiente manera:

  1. En el navegador: FP 360 está configurado para esperar a que FP Targeting asigne los identificadores de usuario y sesión que gestiona.

    Las API de seguimiento de FP 360 (seguimiento de eventos, gestión de datos de usuario, etc.) pueden invocarse en cualquier momento y estas llamadas se pondrán automáticamente en cola hasta que FP Targeting haya sincronizado los identificadores de usuario y sesión.

  2. Después de la caducidad de la sesión de FP Targeting: Durante el procesamiento de una sesión completada de FP Targeting, los servidores de Fanplayr traducirán automáticamente las vistas de página, los pedidos y otros eventos que ocurrieron en los eventos y operaciones equivalentes dentro de FP 360.

Paso 1: Configurar Fanplayr 360 ​

Actualiza tu fragmento de inicialización de FP 360 para deshabilitar el inicio automático de la sesión de navegación configurando autoStartSession en false. Esto indica a la biblioteca que espere hasta que los métodos setSessionId y setUserId sean llamados por Fanplayr Targeting.

javascript
fp360.init({
  writeKey: 'WRITE_KEY',
  endpoint: 'ENDPOINT',
  autoStartSession: false
});

Paso 2: Habilitar la sincronización de identidad en Fanplayr Targeting ​

INFO

Actualmente no existe un control accesible para el usuario para habilitar la sincronización de identidad dentro del portal de Fanplayr Targeting. Por favor, contacta a tu gerente de Customer Success y solicita que esta función sea habilitada en tu cuenta.

Una vez completado esto, Fanplayr Targeting sincronizará automáticamente los identificadores de usuario y sesión con tu integración de JavaScript de Fanplayr 360.

Copyright © 2011-present Fanplayr Inc