Integrare Azure Mobile Engagement in un'applicazione WebIntegrate Azure Mobile Engagement in a web application

Le procedure contenute in questo articolo descrivono il modo più semplice per attivare le funzioni di analisi e monitoraggio di Azure Mobile Engagement in un'applicazione Web.The procedures in this article describe the simplest way to activate the analytics and monitoring functions in Azure Mobile Engagement in your web application.

I passaggi seguenti sono utili per attivare la segnalazione dei log necessari per calcolare tutte le statistiche relative a utenti, sessioni, attività, arresti anomali del sistema e dati tecnici.Follow the steps to activate the log reports that are needed to compute all statistics about users, sessions, activities, crashes, and technicals. Per le statistiche dipendenti dall'applicazione, ad esempio eventi, errori e processi, è necessario attivare manualmente la segnalazione dei log tramite l'API di Azure Mobile Engagement.For application-dependent statistics, such as events, errors, and jobs, you must activate log reports manually by using the Azure Mobile Engagement API. Per altre informazioni, leggere Come usare l'API di Engagement in un'applicazione Web.For more information, learn how to use the advanced Mobile Engagement tagging API in a web application.

IntroduzioneIntroduction

Scaricare Azure Mobile Engagement SDK per Web.Download the Azure Mobile Engagement Web SDK. Il Mobile Engagement SDK per Web viene fornito come un singolo file JavaScript denominato azure-engagement.js, che deve essere incluso in ogni pagina del sito o dell'applicazione Web.The Mobile Engagement Web SDK is shipped as a single JavaScript file, azure-engagement.js, which you have to include in each page of your site or web application.

Importante

Prima di eseguire questo script, è necessario eseguire uno script o un frammento di codice, scritto per configurare Mobile Engagement per l'applicazione.

Compatibilità dei browserBrowser compatibility

Il Mobile Engagement SDK per Web usa la codifica/decodifica JSON nativa e le richieste AJAX tra domini (basandosi sulla specifica W3C CORS).The Mobile Engagement Web SDK uses native JSON encoding and decoding, in addition to cross-domain AJAX requests (relying on the W3C CORS specification). È compatibile con i seguenti browser:It's compatible with the following browsers:

  • Microsoft Edge 12+Microsoft Edge 12+
  • Internet Explorer 10+Internet Explorer 10+
  • Firefox 3.5+Firefox 3.5+
  • Chrome 4+Chrome 4+
  • Safari 6+Safari 6+
  • Opera 12+Opera 12+

Configurare Mobile EngagementConfigure Mobile Engagement

Scrivere uno script per creare un oggetto JavaScript azureEngagement globale simile al seguente.Write a script that creates a global azureEngagement JavaScript object, as in the following example. Poiché il sito potrebbe essere composto da più pagine, questo esempio presuppone che lo script sia incluso in ogni pagina.Because your site might have multiples pages, this example assumes that this script is included in every page. In questo esempio, l'oggetto JavaScript viene denominato azure-engagement-conf.js.In this example, the JavaScript object is named azure-engagement-conf.js.

window.azureEngagement = {
  connectionString: 'Endpoint={appCollection}.{domain};AppId={appId};SdkKey={sdkKey}',
  appVersionName: '1.0.0',
  appVersionCode: 1
};

Il valore connectionString per l'applicazione viene visualizzato nel portale di Azure.The connectionString value for your application is displayed in the Azure portal.

Nota

appVersionName e appVersionCode sono facoltativi. Si consiglia tuttavia di configurarli in modo che l'analisi possa elaborare le informazioni relative alla versione.

Includere script di Mobile Engagement nelle pagineInclude Mobile Engagement scripts in your pages

Aggiungere gli script di Mobile Engagement alle pagine in uno dei modi seguenti:Add Mobile Engagement scripts to your pages in one of the following ways:

<head>
  ...
  <script type="text/javascript" src="azure-engagement-conf.js"></script>
  <script type="text/javascript" src="azure-engagement.js"></script>
  ...
</head>

Oppure:Or this:

<body>
  ...
  <script type="text/javascript" src="azure-engagement-conf.js"></script>
  <script type="text/javascript" src="azure-engagement.js"></script>
  ...
</body>

AliasAlias

Dopo aver caricato lo script di Mobile Engagement SDK per Web, viene creato l'alias engagement per accedere alle API dell'SDK.After the Mobile Engagement Web SDK script is loaded, it creates the engagement alias to access the SDK APIs. Non è possibile usare l'alias per definire la configurazione dell'SDK.You cannot use this alias to define the SDK configuration. In questa documentazione l'alias viene usato come riferimento.This alias is used as a reference in this documentation.

Si noti che se l'alias predefinito è in conflitto con un'altra variabile globale della pagina, sarà possibile ridefinirlo nella configurazione prima di caricare il Mobile Engagement SDK per Web nel modo seguente:Note that if the default alias conflicts with another global variable from your page, you can redefine it in the configuration as follows before you load the Mobile Engagement Web SDK:

window.azureEngagement = {
  connectionString: 'Endpoint={appCollection}.{domain};AppId={appId};SdkKey={sdkKey}',
  appVersionName: '1.0.0',
  appVersionCode: 1
  alias:'anotherAlias'
};

Segnalazione di baseBasic reporting

La segnalazione di base in Mobile Engagement riguarda le statistiche a livello di sessione, ad esempio le statistiche relative a utenti, sessioni, attività e arresti anomali del sistema.Basic reporting in Mobile Engagement covers session-level statistics, such as statistics about users, sessions, activities, and crashes.

Monitoraggio di una sessioneSession tracking

Una sessione di Mobile Engagement è suddivisa in una sequenza di attività identificate da un nome.A Mobile Engagement session is divided into a sequence of activities, each identified by a name.

In un sito Web classico è consigliabile dichiarare un'attività diversa in ogni pagina del sito.In a classic website, we recommend that you declare a different activity on each page of your site. Per una sito o un'applicazione Web in cui la pagina corrente non cambia mai, si desidera monitorare le attività su scala ridotta, ad esempio all'interno della pagina.For a website or web application in which the current page never changes, you might want to track the activities on a smaller scale, such as within the page.

In entrambi i casi, per avviare o modificare l'attività utente corrente, chiamare la funzione engagement.agent.startActivity .Either way, to start or change the current user activity, call the engagement.agent.startActivity function. Ad esempio: For example:

<body onload="yourOnload()">

<!-- -->

yourOnload = function() {
  [...]
  engagement.agent.startActivity('welcome');
};

Il server di Mobile Engagement termina automaticamente una sessione aperta entro 3 minuti dalla chiusura della pagina dell'applicazione.The Mobile Engagement server automatically ends an open session within three minutes after the application page is closed.

In alternativa, è possibile terminare una sessione manualmente chiamando engagement.agent.endActivity.Alternatively, you can end a session manually by calling engagement.agent.endActivity. Ciò consente di impostare l'attività dell'utente corrente su "Idle".This sets the current user activity to 'Idle.' La sessione terminerà dopo 10 secondi fino a quando una nuova chiamata a engagement.agent.startActivity riprenda la sessione.The session will end 10 seconds later unless a new call to engagement.agent.startActivity resumes the session.

È possibile configurare il ritardo di 10 secondi nell'oggetto engagement globale, come segue:You can configure the 10-second delay in the global engagement object, as follows:

engagement.sessionTimeout = 2000; // 2 seconds
// or
engagement.sessionTimeout = 0; // end the session as soon as endActivity is called

Nota

Non è possibile usare engagement.agent.endActivity nel callback onunload perché non è possibile eseguire chiamate AJAX in questa fase.

Segnalazione avanzataAdvanced reporting

Facoltativamente, per segnalare eventi, errori e processi specifici dell'applicazione, è necessario usare l'API di Mobile Engagement.Optionally, if you want to report application-specific events, errors, and jobs, you need to use the Mobile Engagement API. È possibile accedere alle API di Mobile Engagement tramite l'oggetto engagement.agent .You access the Mobile Engagement API through the engagement.agent object.

È possibile accedere a tutte le funzionalità avanzate di Mobile Engagement nell'API di Mobile Engagement.You can access all of the advanced capabilities in Mobile Engagement in the Mobile Engagement API. Per altre informazioni sull'API, leggere Come usare l'API di Engagement in un'applicazione Web.The API is detailed in the article How to use the advanced Mobile Engagement tagging API in a web application.

Personalizzare gli URL usati per le chiamate AJAXCustomize the URLs used for AJAX calls

È possibile personalizzare gli URL usati dal Mobile Engagement SDK per Web.You can customize URLs that the Mobile Engagement Web SDK uses. Ad esempio, per ridefinire l'URL di accesso (l'endpoint SDK per l'accesso), è possibile eseguire l'override della configurazione in modo simile al seguente:For example, to redefine the log URL (the SDK endpoint for logging), you can override the configuration like this:

window.azureEngagement = {
  ...
  urls: {
    ...        
    getLoggerUrl: function() {
    return 'someProxy/log';
    }
  }
};

Se le funzioni URL restituiscono una stringa che inizia con /, //, http:// o https://, lo schema predefinito non è usato.If your URL functions return a string that begins with /, //, http://, or https://, the default scheme is not used. Per impostazione predefinita, per tali URL viene usato lo schema https:// .By default, the https:// scheme is used for those URLs. Se si desidera personalizzare lo schema predefinito, eseguire l'override della configurazione in modo simile al seguente:If you want to customize the default scheme, override the configuration, like this:

window.azureEngagement = {
  ...
  urls: {
    ...         
    scheme: '//'
  }
};