Introduzione ad Azure Mobile Engagement per app Web

Questo argomento illustra come usare Azure Mobile Engagement per conoscere l'utilizzo delle app Web.

Nota

Il servizio Azure Mobile Engagement verrà ritirato a marzo 2018 ed è attualmente disponibile solo per i clienti esistenti. Per altre informazioni, vedere Mobile Engagement.

Per completare questa esercitazione, è necessario disporre di:

  • Visual Studio 2015 o un altro editor di propria scelta
  • Web SDK

Web SDK è in anteprima e per il momento supporta solo l'analisi e non supporta ancora l'invio di notifiche push con il browser o in-app.

Nota

Per completare l'esercitazione, è necessario disporre di un account Azure attivo. Se non si dispone di un account, è possibile creare un account di valutazione gratuita in pochi minuti. Per informazioni dettagliate, vedere la pagina relativa alla versione di valutazione gratuita di Azure.

Configurare Mobile Engagement per l'app Web

  1. Accedere al portale di Azure.
  2. Fare clic su Nuovo, quindi su Web e dispositivi mobili e infine su Mobile Engagement.

  3. Nel pannello New Mobile Engagement App Collection (Nuova raccolta di app Mobile Engagement) visualizzato si creerà una raccolta di app invece che un'app come nel portale di Azure classico. Immettere le seguenti informazioni:

    • Nome: Nome of your raccolta di applicazioni
    • Piattaforme: selezionare le piattaforme di destinazione per l'app nel pannello Piattaforme che verrà aperto. Ad esempio, se è necessaria un'app sia per iOS che per Android, selezionare entrambe le piattaforme per creare due app in questa raccolta di app.

    • Sottoscrizione: selezionare la sottoscrizione di Azure.
    • Gruppo di risorse: selezionare il gruppo di risorse di Azure in cui inserire questa risorsa di Azure (Raccolta di app Mobile Engagement). È possibile scegliere di crearne uno nuovo.
    • Località: area in cui verranno archiviati i dati su questa raccolta di app e su questa app.
  4. Esplorare le raccolte di app Mobile Engagement facendo clic su Esplora e cercando Mobile Engagement

  5. Verrà visualizzato un elenco di raccolte di app Mobile Engagement: assicurarsi di avere la stessa sottoscrizione di Azure in cui è stata creata la raccolta di app.

  6. Fare clic sulla raccolta di app creata nel passaggio precedente per aprire il pannello della risorsa raccolta di app che visualizzerà le diverse app presenti in questa raccolta di app.

  7. Fare clic sull'app creata per la piattaforma per cui si sta sviluppando.

  8. Fare clic sul pulsante di comando Informazioni di connessione in alto per aprire il pannello Informazioni di connessione e copiare la stringa di connessione.

Connettere l'app al back-end di Mobile Engagement

Questa esercitazione presenta una "integrazione di base", che è la configurazione minima necessaria per raccogliere i dati.

Verrà creata un'app Web di base con Visual Studio per dare una dimostrazione dell'integrazione, ma è possibile eseguire i passaggi anche con qualsiasi applicazione Web creata al di fuori di Visual Studio.

Creare una nuova app Web

I passaggi seguenti presuppongono l'utilizzo di Visual Studio 2015 anche se i passaggi sono simili nelle versioni precedenti di Visual Studio.

  1. Avviare Visual Studio e selezionare Nuovo progetto nella schermata Home.
  2. Nel popup selezionare Web -> Applicazione Web ASP.NET. Inserire Nome, Percorso e Nome soluzione dell'app e quindi fare clic su OK.
  3. Nel popup Selezionare un modello selezionare Vuoto in ASP.Net 4.5 Templates (Modelli di ASP.Net 4.5) e fare clic su OK.

A questo punto è stato creato un nuovo progetto di app Web vuota in cui si integrerà Azure Mobile Engagement Web SDK.

Connettere l'app al back-end di Mobile Engagement

  1. Creare una nuova cartella denominata javascript nella soluzione e aggiungervi il file JS Web SDK azure-engagement.js.
  2. Aggiungere un nuovo file denominato main.js nella cartella javascript con il codice seguente. Verificare di aggiornare la stringa di connessione. Questo oggetto azureEngagement verrà usato per accedere ai metodi di Web SDK.

     var azureEngagement = {
         debug: true,
         connectionString: 'xxxxx'
     };
    

    Visual Studio con file JS

Abilitare il monitoraggio in tempo reale

Per iniziare a inviare dati e assicurarsi che gli utenti siano attivi, è necessario inviare almeno un'attività al back-end di Mobile Engagement. Un'attività nell'ambito di un'app Web è una pagina Web.

  1. Creare una nuova pagina denominata home.html nella soluzione e impostarla come pagina iniziale per l'app Web.
  2. Includere i due file JavaScript aggiunti prima in questa pagina aggiungendo il codice seguente nel tag body.

     <script type="text/javascript" src="javascript/main.js"></script>
     <script type="text/javascript" src="javascript/azure-engagement.js"></script>
    
  3. Aggiornare il tag body per chiamare il metodo startActivity di EngagementAgent.

     <body onload="engagement.agent.startActivity('Home')">
    
  4. Ecco come appare il file home.html .

     <html>
     <head>
         ...
     </head>
     <body onload="engagement.agent.startActivity('Home')">
         <script type="text/javascript" src="javascript/main.js"></script>
         <script type="text/javascript" src="javascript/azure-engagement.js"></script>
     </body>
     </html>
    

Connettere l'app con monitoraggio in tempo reale

Questa sezione descrive come connettere l'app al back-end di Mobile Engagement usando la funzionalità di monitoraggio in tempo reale di Mobile Engagement.

  1. Nell'account Azure Mobile Engagement, accertarsi di selezionare l'app che si desidera monitorare e gestire nel portale di Mobile Engagement. Accedere al portale di Mobile Engagement facendo clic sul pulsante Engagement nella parte inferiore.

  2. Viene visualizzato il portale Mobile Engagement. Se non è selezionata la scheda Monitoraggio, fare clic su Monitoraggio.
  3. Verranno visualizzati, in tempo reale, tutti i dispositivi in cui l'app verrà avviata.
  4. Avviare l'app. Se l'integrazione è corretta si noterà una sessione di monitoraggio, che significa che l'app ora è collegata al back-end di Mobile Engagement e sta inviando dati ad esso.

Estendere l'analisi

Ecco tutti i metodi attualmente disponibili con Web SDK che è possibile usare per l'analisi:

  1. Attività/Pagine Web:

     engagement.agent.startActivity(name);
     engagement.agent.endActivity();
    
  2. Events

     engagement.agent.sendEvent(name, extras);
    
  3. Errori

     engagement.agent.sendError(name, extras);
    
  4. Processi

     engagement.agent.startJob(name);
     engagement.agent.endJob(name);