Fanplayr Docs

Italiano

English
日本語
Español

Italiano

English
日本語
Español

Appearance

API JavaScript ​

Inizializzare la Libreria ​

Incolla questo tag script HTML all'interno del tag <head> della tua pagina, sostituendo WRITE_KEY ed ENDPOINT con la chiave di scrittura e l'endpoint generati dall'integrazione che hai creato.

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 volta eseguito il codice di cui sopra, l'oggetto fp360 sarà disponibile globalmente nel tuo JavaScript.

DANGER

Il flag debug è utile durante l'implementazione, ma si raccomanda di rimuoverlo per l'utilizzo in produzione.

Tracciare gli Eventi ​

Una volta che hai la libreria Fanplayr 360 sulla tua pagina, puoi tracciare un evento chiamando fp360.track con il nome dell'evento e le proprietà.

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

WARNING

Le chiamate di tracciamento possono includere Dati Semantici. Se stai inviando attributi personalizzati, dovresti sempre inviare semplici coppie chiave/valore, ma i Dati Semantici possono includere oggetti.

L'esempio sopra utilizza un $product Oggetto Semantico.

Gestione delle Sessioni ​

La libreria JavaScript gestisce automaticamente gli identificatori di sessione e utente. Se hai bisogno di impostare manualmente un identificatore di sessione o utente, ad esempio quando utilizzi un servizio come PrivacyID, puoi chiamare quanto segue:

javascript
// Imposta un identificatore di sessione
fp360.setSessionId('<SESSION IDENTIFER>');

// Imposta un identificatore utente primario
fp360.setUserId('<USER IDENTIFIER>');

Le sessioni termineranno automaticamente dopo 45 minuti dall'ultimo evento inviato con un dato identificatore di sessione.

INFO

Gli ID utente impostati qui sono diversi da Identità Utente, e in generale non dovrai gestire nulla di tutto questo tu stesso.

Tracciare le Pagine ​

La chiamata page ti consente di registrare ogni volta che un utente visualizza una pagina del tuo sito web, insieme a qualsiasi proprietà opzionale sulla pagina.

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

Qualsiasi valore può essere fornito per type ma se ne utilizzi uno dei seguenti, potrebbe essere usato per aggiungere funzionalità agli Insights.

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

Gestione dell'Identità dell'Utente ​

Identità primaria ​

Per impostazione predefinita, Fanplayr 360 genera un identificatore unico (UUID) per l'utente e lo memorizza in LocalStorage nel browser. Puoi sovrascrivere questo identificatore fornendo il tuo valore unico per l'utente.

javascript
fp360.setUserId('UNIQUE_USER_ID');

Identificatori secondari ​

Gli utenti possono interagire con la tua attività utilizzando più dispositivi e, a meno che tu non fornisca un identificatore primario coerente per l'utente con il metodo setUserId, appariranno come utenti diversi su ogni dispositivo.

Se non sei in grado di fornire un identificatore primario immediatamente all'inizio di ogni visualizzazione di pagina, un'alternativa è fornire identificatori secondari che Fanplayr 360 utilizza per collegare gli identificatori primari tra loro. Questi vengono forniti come coppie "chiave" e "valore" utilizzando il metodo identify.

Ad esempio, un indirizzo email o un numero di fedeltà del cliente possono essere buoni identificatori secondari perché dovrebbero rimanere unici per l'utente su diversi dispositivi e sistemi all'interno della tua attività:

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

L'esempio sopra associa un identificatore secondario all'utente corrente. Ogni volta che Fanplayr 360 rileva due utenti (identità primarie) con gli stessi identificatori secondari, collegherà tali utenti in modo che tutti gli eventi e gli attributi siano associati allo stesso profilo utente.

INFO

È possibile chiamare questo metodo più volte. Ad esempio, potresti volerlo chiamare su ogni visualizzazione di pagina per semplificare l'implementazione. La libreria JavaScript si occupa di inviare i dati solo se questi cambiano.

WARNING

Se utilizzi email o phone come identificatore, questi verranno automaticamente aggiunti come attributi utente semantici $email e $phone. Inoltre, questi identificatori verranno automaticamente mappati agli identificatori: $email e $phone.

INFO

Tutte le identità utente sono automaticamente considerate PII Medie. Scopri di più sulle PII qui.

Gestione del Profilo Utente ​

Gli attributi possono essere impostati direttamente sugli utenti utilizzando la chiamata user.set. Puoi anche impostare informazioni solo se non sono già state impostate utilizzando la chiamata user.setOnce, rimuovere proprietà utilizzando la chiamata user.unset, e incrementare un contatore utilizzando la chiamata user.increment.

Impostare un attributo ​

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

In questo esempio stiamo tracciando due attributi semantici, quelli che iniziano con un $. Questi vengono utilizzati all'interno del nostro sistema per aggiungere funzionalità extra.

Puoi anche impostare un singolo attributo alla volta:

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

Imposta una sola volta ​

Se vuoi impostare un attributo solo se non esiste ancora, puoi:

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

O un singolo elemento alla volta:

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

Scadenza ​

A volte potresti voler impostare un attributo su un utente che dura solo fino a una data e ora specifica. Puoi farlo inviando un oggetto Date di JavaScript, un timestamp che rappresenta il numero di millisecondi dall'epoca, o una string nel formato YYYY-MM-DD HH:mm:ss.

Puoi impostare più attributi contemporaneamente; gli esempi seguenti si riferiscono tutti alla stessa data e ora:

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

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

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

Oppure per un singolo attributo:

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

Per i tempi relativi puoi usare un numero intero seguito da una delle seguenti lettere - sebbene sia sufficiente fornire solo la prima lettera:

  • second(i)
  • minut(i)
  • hora(e)
  • dia(i)
  • wettimana(e)
  • yanno(i)

Ad esempio, per "3 minuti" da adesso potresti impostare expires su "3m", "3 minutes" ecc.

Rimozione di un attributo ​

Puoi rimuovere più attributi su un utente inviando le chiavi come array:

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

O un singolo attributo semplicemente con la chiave:

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

Incrementare un attributo ​

Incrementare un attributo può essere usato per aggiungere conteggi direttamente a un utente.

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

Se l'attributo non esiste ancora nel profilo utente, verrà impostato a 1.

WARNING

Se esiste già un attributo con quel nome, e non è un numero intero, il valore verrà anch'esso impostato a 1. Questo è vero anche se il valore è una stringa "1" piuttosto che il valore effettivo 1. Anche i valori float come 10.5 verranno reimpostati a 1 alla prima chiamata di incremento.

Puoi anche incrementare un attributo di più di 1:

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

Gestione del Consenso dell'Utente ​

Il tracciamento del consenso dell'utente è molto importante per rimanere conformi alle normative come il GDPR e il CCPA, ed è una buona pratica per mantenere soddisfatti i tuoi utenti. Offriamo un supporto estensivo per il tracciamento granulare del consenso.

Aggiunta del Consenso ​

L'aggiunta del consenso dell'utente richiede, come minimo, un type come "email" o "phone" e un value come "person@example.com".

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

Quanto sopra indicherebbe semplicemente che un utente ha acconsentito ad essere contattato dalla tua azienda via email a un dato indirizzo email. Non indica per quale purpose o topics specifici potrebbero essere interessati.

Aggiunta di uno Scopo ​

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

Il codice sopra indicherebbe che l'utente ha dato il permesso di essere contattato via email, a un indirizzo specifico, allo purpose sia di "marketing" che di "transactional" (email come le conferme d'ordine).

Aggiunta di Argomenti (Topics) ​

A volte i tuoi utenti potrebbero voler essere contattati solo per scopi specifici, o riguardo a certi prodotti. Puoi indicarlo utilizzando:

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

Il codice sopra indicherebbe che un utente ha dato il permesso di essere contattato via email, a un indirizzo specifico, per purpose di "marketing" ma solo riguardo gli topics "Men's Clothing" o "Men's accessories".

INFO

L'impostazione del consenso per un type / value già esistente sovrascriverà l'attuale purpose e topics - assicurati di set sempre tutte queste proprietà ad ogni chiamata.

Rimozione del Consenso ​

Rimuovere il consenso degli utenti è facile e richiede solo un type e un value.

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

Svuotamento della coda dei messaggi ​

Fanplayr 360 accoda e raggruppa eventi e altri dati tracciati per ottimizzare le chiamate di tracciamento e ridurre il carico di richieste di rete per i visitatori del tuo sito web.

In alcuni casi potresti aver bisogno di sapere quando tutti i messaggi sono stati tracciati per poter consentire la navigazione verso altre pagine. Ad esempio, potresti tracciare un evento per rappresentare l'invio di un modulo e voler attendere che il tracciamento sia completato prima di reindirizzare l'utente a un'altra parte del sito web. In questo caso, utilizza l'API flush:

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

fp360.flush(function () {
  // Gli eventi di Fanplayr 360 sono stati tracciati con successo e l'utente può
  // essere reindirizzato a un'altra pagina.
});

Utilizzo con Fanplayr Targeting ​

Fanplayr 360 può essere facilmente configurato per tracciare i dati già acquisiti dalla tua integrazione Fanplayr Targeting. Questo funziona come segue:

  1. Nel Browser: FP 360 è configurato per attendere che FP Targeting assegni gli identificatori di utente e sessione che gestisce.

    Le API di tracciamento di FP 360 (tracciamento di eventi, gestione dei dati utente ecc.) possono essere invocate in qualsiasi momento e queste chiamate verranno automaticamente accodate fino a quando FP Targeting non avrà sincronizzato gli identificatori di utente e sessione.

  2. Dopo la scadenza della sessione FP Targeting: Durante l'elaborazione di una sessione FP Targeting completata, i server di Fanplayr tradurranno automaticamente le visualizzazioni di pagina, gli ordini e altri eventi che si sono verificati negli eventi e nelle operazioni equivalenti all'interno di FP 360.

Step 1: Configurare Fanplayr 360 ​

Aggiorna il tuo snippet di inizializzazione di FP 360 per disabilitare l'avvio automatico della sessione di navigazione impostando autoStartSession su false. Questo istruisce la libreria ad attendere che i metodi setSessionId e setUserId vengano chiamati da Fanplayr Targeting.

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

Step 2: Abilitare la sincronizzazione dell'identità in Fanplayr Targeting ​

INFO

Attualmente non esiste un controllo accessibile all'utente per abilitare la sincronizzazione dell'identità all'interno del portale Fanplayr Targeting. Contatta il tuo Customer Success manager e richiedi che questa funzionalità venga abilitata sul tuo account.

Una volta completato questo passaggio, Fanplayr Targeting sincronizzerà automaticamente gli identificatori di utente e sessione con la tua integrazione JavaScript di Fanplayr 360.

Copyright © 2011-present Fanplayr Inc