Integrazione di Analitica dei consumi con gli esempi headless in Oracle Content Management

Introduzione

In Oracle Content Management sono disponibili funzioni di analitica del consumo che consentono di tenere traccia dell'uso e della popolarità degli asset nei siti. L'abilitazione dell'analitica del consumo per i siti headless è un'operazione semplice che richiede solo alcune semplici modifiche al codice sorgente dell'applicazione.

In questa esercitazione verrà aggiunta l'analitica del consumo al sito di esempio del blogheadless React e verrà visualizzata l'analitica in Oracle Content Management.

Questa esercitazione si concentra su React, ma è possibile utilizzare un approccio simile per altre tecnologie Web, tra cui Angular, Gatsby, Next.js, Svelte e Vue.js.

Il tutorial prevede tre passi:

Abilita analitica consumo in Oracle Content Management
Modificare il codice di esempio
Visualizzare l'analitica

Prerequisiti

Prima di procedere con questa esercitazione, si consiglia di leggere prima le seguenti informazioni:

Creazione di strumenti per i siti senza problemi con l'analitica dei consumi

Per seguire questa esercitazione, è necessario:

una sottoscrizione a Oracle Content Management
un account Oracle Content Management con il ruolo Amministratore contenuto;
codice sorgente per un campione senza testa da modificare

Task 1: Abilita analitica consumo in Oracle Content Management

Se non si dispone già di un'istanza di Oracle Content Management, vedere Avvio rapido per informazioni su come effettuare la registrazione a Oracle Cloud, eseguire il provisioning di un'istanza di Oracle Content Management e configurare Oracle Content Management come CMS headless.

Dopo l'impostazione, sarà necessario configurare il sistema per abilitare l'analitica del consumo:

Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
Fare clic su Sistema nel menu di navigazione a sinistra e scegliere Analitica nell'elenco a discesa.
Abilitare Analitica consumo asset in Analitica consumo. Facoltativamente, è possibile abilitare il proprio servizio Infinity, che può essere utile se l'analitica fornita è troppo limitata. Successivamente, puoi acquistare una licenza Infinity aggiuntiva e connetterla a Oracle Content Management. Normalmente, questo non è necessario per iniziare con l'analisi dei dati e questa esercitazione non lo coprirà.
Al termine, fare clic su Salva. È tutto ciò che serve dire a Oracle Content Management di iniziare a raccogliere dati analitici di base, ad esempio caricare e visualizzare gli eventi su canali specifici, accedere per area geografica e paese e quali browser e sistemi operativi visualizzano gli asset.

Task 2: modificare il codice di esempio

In questa esercitazione verrà fornita l'analitica per un esempio di blog React ogni volta che un utente visualizza una qualsiasi delle pagine secondarie della pagina principale, ad esempio la pagina Bevande. Dopo aver configurato l'analitica del consumo, sarà possibile visualizzare queste analisi nell'interfaccia Web di Oracle Content Management.

Questa immagine mostra la pagina principale del blog.

Aggiungi script di analitica

Di seguito è riportata la versione generica dello script di analisi da inserire nel codice HTML per la pagina per la quale si desidera raccogliere l'analitica:

<script type="text/javascript" src="//<instance>.ocecdn.oraclecloud.com/_sitesclouddelivery/analytics/ocm-asset-analytics.js?channelId=<channel-id>" async></script>

Per l'esempio React Blog, il seguente è lo script di analisi che verrà aggiunto al codice HTML:

<script type="text/javascript" src={`//${process.env.SERVER_URL.replace(/^https?:\/\//,'')}/_sitesclouddelivery/analytics/ocm-asset-analytics.js?channelId=${process.env.CHANNEL_ID}`} async> </script>

Verrà aggiunto nel file TopicsListPage.jsx nella sezione del componente sottoposto a rendering sotto TopicsListContainer div.

Si noti che l'istanza è l'URL del server, ospitato in https://samples.mycontentdemo.com per gli esempi disponibili per Oracle Content Management. Per lo script di analisi, si desidera rimuovere la parte https:// dall'URL del server elencato nel file dell'ambiente (.env), motivo per cui è incluso .replace(/^https?:\/\//, '').

Lo script di analisi viene ospitato all'URL del server + /_sitesclouddelivery/analytics/ocm-asset-analytics.js, pertanto è possibile visualizzare lo script che analizza gli eventi in https://samples.mycontentdemo.com/_sitesclouddelivery/analytics/ocm-asset-analytics.js. Si noti che l'analitica è stata abilitata in Oracle Content Management (enableAnalytics è vera) e che l'ID servizio e l'ID account sono incorporati nell'istanza di script qui. Non è necessario gestire l'ID servizio o l'ID account.

Ottenere l'ID del canale

È inoltre necessario ottenere l'ID canale per il canale di contenuto. Si noti che l'ID canale e il token canale sono due identificativi separati.

Per trovare l'ID canale:

Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
Fare clic su Contenuto nel menu di navigazione a sinistra e scegliere Pubblicazione dei canali nell'elenco a discesa.
Selezionare il canale appropriato (OCEGettingStartedChannel per il contenuto del blog).
Fare clic su Modifica, quindi aprire il pannello laterale.
Aprire il pannello Proprietà, quindi la scheda API per visualizzare sia l'ID canale che il token canale. Fare attenzione a non aggiornare il token del canale se tale codice è disponibile in altre posizioni, ad esempio il file dell'ambiente.

Questa immagine mostra i passi dell'ID canale.

È necessario impostare questo valore nel file dell'ambiente (.env) aggiungendo quanto segue alla parte inferiore del file:

CHANNEL_ID=RCHANNELA57XXXXXXXXXXXXXXXXXXXXXXXXXXXX

Inoltre, per l'esempio di React Blog, dovremo aggiungere quanto segue alla sezione new webpack.DefinePlugin della sezione plugin del file webpack.base.config.js:

'process.env.CHANNEL_ID': JSON.stringify(process.env.CHANNEL_ID),

Aggiungi strumento pagina

Per registrare automaticamente gli eventi di consumo degli asset, è necessario aggiungere un attributo "dati" speciale al markup degli asset visualizzati nella pagina. L'attributo data-asset-operation indica alla libreria ocm-asset-analytics.js di produrre automaticamente eventi di analisi.

Dettagli sui valori da inserire nell'attributo dati disponibili nella documentazione di Oracle Content Management.

Per l'esempio React Blog, poiché si desidera ottenere analisi ogni volta che un utente visualizza una qualsiasi delle pagine secondarie nella pagina principale, come la pagina Drinks, si desidera che l'attributo data-asset-operation sia il seguente:

<div data-asset-operation={`view:${topic.id}:view`} />

Verrà inserito nel codice HTML accanto a ogni TopicListItem. L'attributo data-asset-operation indica che quando un utente fa clic su una pagina secondaria dalla pagina di elenco degli argomenti di livello superiore, un log viene inviato tramite la scheda di rete in una vista dell'asset di pagina pertinente.

Riepilogo di tutte le modifiche al codice per il campione del blog React

Di seguito viene descritto l'aspetto del codice TopicsListPage dopo l'inserimento dello script di analisi e dell'attributo data-asset-operation.

return (
<div data-testid="TopicsListContainer">
   <script type="text/javascript" src={`//${process.env.SERVER_URL.replace(/^https?:\/\//, '')}/_sitesclouddelivery/analytics/ocm-asset-analytics.js?channelId=${process.env.CHANNEL_ID}`} async> </script>
   <Header
      companyTitle={companyTitle}
      companyThumbnailRenditionUrls={companyThumbnailRenditionUrls}
      aboutUrl={aboutUrl}
      contactUrl={contactUrl}
   />
   {topics && (
   <div id="topics">
      {topics.map(
      (topic) => (
         <><div data-asset-operation={`view:${topic.id}:view`} /><TopicsListItem topic={topic} key={topic.id} /></>
      ),
      )}
   </div>
   )}
</div>
);

Inoltre, abbiamo dovuto ottenere l'ID canale, aggiungere il parametro CHANNEL_ID nel file .env e aggiornare la sezione del plugin file webpack.base.config.js per indicare questa aggiunta della variabile d'ambiente.

Task 3: Visualizza l'analitica

Ora, dovremmo essere in grado di analizzare gli eventi. Vediamo il codice HTML nella home page del blog:

In questa immagine viene mostrato l'HTML della home page del blog.

Notare come lo script di analisi e l'attributo data-asset-operation vengono ora aggiunti al codice HTML. In questo modo vengono inviati i dati di analitica a un'istanza di analitica Infinity di proprietà di Oracle. I nomi degli eventi di rete che iniziano con 'dcs.gif?' sono tutti gli Analytics elaborati e inviati nell'URL della richiesta, analizzati nello script di analitica.

Questa immagine mostra la scheda Rete.

I dati di analisi vengono sottoposti a query ogni giorno da Infinity e visualizzati nell'interfaccia Web di Oracle Content Management. Tenere presente che la visualizzazione dell'analitica richiede del tempo e in genere i dati subiscono un ritardo di circa un giorno. Per visualizzare l'analitica, fare clic sull'asset, passare all'icona del menu in alto a destra per aprire la barra laterale e selezionare Analitica nel menu a discesa. Si noti che l'angolo in basso a destra mostra l'ultimo aggiornamento dei dati.

Questa immagine mostra l'analitica.

Conclusione e fasi successive

In questa esercitazione, abbiamo abilitato l'analitica del consumo e abbiamo modificato l'esempio di blogheadless React per fornire tali analitiche a un'istanza di analitica Infinity. Infine, l'analitica è stata visualizzata direttamente in Oracle Content Management.

Un ulteriore passo successivo per le funzioni avanzate potrebbe essere l'impostazione dell'account personale di Infinity Analytics e la configurazione di Oracle Content Management per l'utilizzo di tale account.

Titolo e informazioni sul copyright

Integrazione di Analitica dei consumi con gli esempi headless in Oracle Content Management

F56474-01

Aprile 2022

Autore principale: Oracle Corporation