Introduzione ad Azure Mobile Engagement per app WebGet started with Azure Mobile Engagement for Web Apps

Questo argomento illustra come usare Azure Mobile Engagement per conoscere l'utilizzo delle app Web.This topic shows you how to use Azure Mobile Engagement to understand your Web App usage.

Nota

Il servizio Azure Mobile Engagement verrà ritirato a marzo 2018 ed è attualmente disponibile solo per i clienti esistenti.The Azure Mobile Engagement service will be retired March 2018 and is currently only available to existing customers. Per altre informazioni, vedere Mobile Engagement.For more information, see Mobile Engagement.

Per completare questa esercitazione, è necessario disporre di:This tutorial requires the following:

  • Visual Studio 2015 o un altro editor di propria sceltaVisual Studio 2015 or any other editor of your choice
  • Web SDKWeb 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.This Web SDK is in Preview and only supports Analytics at the moment and doesn't support sending browser or in-app push notifications yet.

Nota

Per completare l'esercitazione, è necessario disporre di un account Azure attivo.To complete this tutorial, you must have an active Azure account. Se non si dispone di un account, è possibile creare un account di valutazione gratuita in pochi minuti.If you don't have an account, you can create a free trial account in just a couple of minutes. Per informazioni dettagliate, vedere la pagina relativa alla versione di valutazione gratuita di Azure.For details, see Azure Free Trial.

Configurare Mobile Engagement per l'app WebSetup Mobile Engagement for your Web app

  1. Accedere al portale di Azure.Log on to the Azure Portal.
  2. Fare clic su Nuovo, quindi su Web e dispositivi mobili e infine su Mobile Engagement.Click on New, then Web + Mobile, and then 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.In the New Mobile Engagement App Collection blade that appears, you will be creating an App Collection instead of an App like in the Azure classic portal. Immettere le seguenti informazioni:Enter the following information:

    • Nome: Nome of your raccolta di applicazioniName: Name of your application collection
    • Piattaforme: selezionare le piattaforme di destinazione per l'app nel pannello Piattaforme che verrà aperto.Platforms: Select target platforms for your app on the Platforms blade which will open up. Ad esempio,E.g. se è necessaria un'app sia per iOS che per Android, selezionare entrambe le piattaforme per creare due app in questa raccolta di app.if you want an app for both iOS & Android then select both platforms and you will get two apps created under this app collection.

    • Sottoscrizione: selezionare la sottoscrizione di Azure.Subscription: Select the Azure subscription.
    • Gruppo di risorse: selezionare il gruppo di risorse di Azure in cui inserire questa risorsa di Azure (Raccolta di app Mobile Engagement).Resource group: Select the Azure Resource group in which you want this Azure resource (Mobile Engagement App Collection). È possibile scegliere di crearne uno nuovo.You can choose to create a new one.
    • Località: area in cui verranno archiviati i dati su questa raccolta di app e su questa app.Location: Region where the data about this app collection & app will be stored.
  4. Esplorare le raccolte di app Mobile Engagement facendo clic su Esplora e cercando Mobile EngagementBrowse through the Mobile Engagement app collections by clicking Browse and search for 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.You will be shown a list of Mobile Engagement App Collections - make sure you have the same Azure subscription where you created your App Collection.

  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.Click on the App Collection that you created in the prior step to open up the App Collection resource blade which will show the different apps present inside this app collection.

  7. Fare clic sull'app creata per la piattaforma per cui si sta sviluppando.Click on the App created for the platform you are developing for.

  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.Click on Connection Info command button at the top to open up the Connection Info blade and copy the connection string from there.

Connettere l'app al back-end di Mobile EngagementConnect your app to the Mobile Engagement backend

Questa esercitazione presenta una "integrazione di base", che è la configurazione minima necessaria per raccogliere i dati.This tutorial presents a "basic integration," which is the minimal set required to collect data.

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.We will create a basic web app with Visual Studio to demonstrate the integration though you can follow the steps with any web application created outside of Visual Studio also.

Creare una nuova app WebCreate a new Web App

I passaggi seguenti presuppongono l'utilizzo di Visual Studio 2015 anche se i passaggi sono simili nelle versioni precedenti di Visual Studio.The following steps assume the use of Visual Studio 2015 though the steps are similar in earlier versions of Visual Studio.

  1. Avviare Visual Studio e selezionare Nuovo progetto nella schermata Home.Start Visual Studio, and in the Home screen, select New Project.
  2. Nel popup selezionare Web -> Applicazione Web ASP.NET.In the pop-up, select Web -> ASP.Net Web Application. Inserire Nome, Percorso e Nome soluzione dell'app e quindi fare clic su OK.Fill in the app Name, Location and Solution name, and then click 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.In the Select a template popup, select Empty under ASP.Net 4.5 Templates and click OK.

A questo punto è stato creato un nuovo progetto di app Web vuota in cui si integrerà Azure Mobile Engagement Web SDK.You have now created a new blank Web App project into which we will integrate the Azure Mobile Engagement Web SDK.

Connettere l'app al back-end di Mobile EngagementConnect your app to Mobile Engagement backend

  1. Creare una nuova cartella denominata javascript nella soluzione e aggiungervi il file JS Web SDK azure-engagement.js.Create a new folder called javascript in your solution and add the Web SDK JS file azure-engagement.js into it.
  2. Aggiungere un nuovo file denominato main.js nella cartella javascript con il codice seguente.Add a new file called main.js in this javascript folder with the following code. Verificare di aggiornare la stringa di connessione.Make sure to update the connection string. Questo oggetto azureEngagement verrà usato per accedere ai metodi di Web SDK.This azureEngagement object will be used to access Web SDK methods.

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

    Visual Studio con file JS

Abilitare il monitoraggio in tempo realeEnable real-time monitoring

Per iniziare a inviare dati e assicurarsi che gli utenti siano attivi, è necessario inviare almeno un'attività al back-end di Mobile Engagement.In order to start sending data and ensuring that the users are active, you must send at least one Activity to the Mobile Engagement backend. Un'attività nell'ambito di un'app Web è una pagina Web.An activity in the context of a web app is a web page.

  1. Creare una nuova pagina denominata home.html nella soluzione e impostarla come pagina iniziale per l'app Web.Create a new page called home.html in your solution and set it as the starting page for your web app.
  2. Includere i due file JavaScript aggiunti prima in questa pagina aggiungendo il codice seguente nel tag body.Include the two javascripts we added earlier in this page by adding the following within the body tag.

     <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.Update the body tag to call EngagementAgent's startActivity method

     <body onload="engagement.agent.startActivity('Home')">
    
  4. Ecco come appare il file home.html .Here is what your home.html will look like

     <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 realeConnect app with real-time monitoring

Questa sezione descrive come connettere l'app al back-end di Mobile Engagement usando la funzionalità di monitoraggio in tempo reale di Mobile Engagement.This section shows you how to connect your app to the Mobile Engagement backend by using the Mobile Engagement's real-time monitoring feature.

  1. Nell'account Azure Mobile Engagement, accertarsi di selezionare l'app che si desidera monitorare e gestire nel portale di Mobile Engagement.In your Azure Mobile Engagement account, make sure you select the app you wish to monitor and manage in the Mobile Engagement portal. Accedere al portale di Mobile Engagement facendo clic sul pulsante Engagement nella parte inferiore.Navigate to your Mobile Engagement portal by clicking the Engage button at the bottom.

  2. Viene visualizzato il portale Mobile Engagement.You will land in the Mobile Engagement portal. Se non è selezionata la scheda Monitoraggio, fare clic su Monitoraggio.If the Monitor tab is not selected, click on the Monitor.
  3. Verranno visualizzati, in tempo reale, tutti i dispositivi in cui l'app verrà avviata.The monitor is ready to show you any device in real time, which will start your app.
  4. Avviare l'app.Start your app now. 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.You should see one session in the monitor if your integration is correct which means that your app is now connected to the Mobile Engagement backend and is sending data to it.

Estendere l'analisiExtend analytics

Ecco tutti i metodi attualmente disponibili con Web SDK che è possibile usare per l'analisi:Here are all the methods currently available with Web SDK that you can use for analytics:

  1. Attività/Pagine Web:Activities/Web pages:

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

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

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

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