Co-autor: Asim Chatterjee .

Esta postagem explica como a Adobe Experience Platform e a Adobe Experience Cloud podem ser integradas aos aplicativos móveis React Native e como podemos conduzir a personalização por meio do Adobe Target no aplicativo e habilitar o Adobe Analytics como fonte de relatórios para o Adobe Target (A4T) .

O uso da Adobe Experience Platform está crescendo tremendamente devido às suas vastas ofertas e recursos, fornecendo uma plataforma aberta, inteligente e em tempo real que resolve os problemas dos clientes acelerando o tempo de retorno. A TI e as empresas estão migrando principalmente para a tecnologia React Native, que permite a criação de aplicativos multiplataforma robustos que parecem totalmente nativos, fáceis e econômicos.

Para esta postagem, estamos seguindo as etapas abaixo:

• Criando um aplicativo React Native
• Instalação do Adobe Experience Platform Mobile SDK e pacotes necessários no aplicativo
• Configuração do ambiente Adobe Experience Platform para integração básica, criação de Segmentos para personalização e ativação para o Adobe Target
• Personalização da experiência do usuário no aplicativo móvel por meio do Adobe Target e captura de métricas de desempenho no Adobe Analytics

Crie um aplicativo React Native

O seguinte artigo explica como um simples aplicativo móvel React Native pode ser criado:

https://reactnative.dev/docs/getting-started#interactive-examples

Instalar pacotes NPM da Adobe Experience Platform

Agora, precisamos instalar os pacotes NPM da Adobe Experience Platform no aplicativo móvel. Isso pode ser instalado a partir do comando NPM:

npm install @adobe/react-native-aep{extension}

@adobe/react-native-aepcore
@adobe/react-native-aepuserprofile
@adobe/react-native-aepedge
@adobe/react-native-aepedgeidentity
@adobe/react-native-aepassurance
@adobe/react-native-aeptarget

Vamos agora para a Adobe Experience Platform , a primeira etapa é criar o esquema e o conjunto de dados que consumirá os dados da plataforma Mobile App. Para este caso de uso, criaremos um esquema de evento e um conjunto de dados para mapeá-lo com esse esquema de evento. O requisito de rastreamento será rastreamento de dados de ciclo de vida limitado, carregamento de tela e rastreamento de dados de evento de clique e, portanto, projetaríamos o esquema de acordo. Nossa identidade primária e identidade secundária serão mapeadas para ECID e ID de e-mail com hash, respectivamente. Precisamos criar um conjunto de dados e mapeá-lo para o esquema de evento que criamos agora.

Observação: precisamos garantir a ativação do alternador de perfil para o esquema de evento e o conjunto de dados para habilitar os dados para o perfil.

Para mais detalhes, consultehttps://experienceleague.adobe.com/docs/experience-platform/xdm/schema/composition.html

Configuração de borda

O Adobe Experience Platform Edge Network é um gateway único para várias transferências de dados. Usamos o Edge para enviar os dados para a Adobe Experience Platform . Neste post, vamos focar na integração da Adobe Experience Platform com a plataforma React Native. Isso inclui algumas etapas padrão e você pode encontrar instruções detalhadas aqui: https://developer.adobe.com/client-sdks/documentation/

Configuração do DataStream e configuração de inicialização

Um DataStream é necessário para rotear dados da Adobe Experience Platform Edge Network para um dos sistemas finais — Adobe Analytics , Audience Manager , Adobe Experience Platform , etc. Vamos alternar entre Adobe Experience Platform e Adobe Target para este caso de uso. Depois que o DataStream estiver configurado, precisamos configurar a propriedade Launch, instalar as extensões e publicar as alterações.

Inclusão de esquema de modelo de dados de experiência (XDM) no aplicativo móvel

Agora precisamos adicionar o design do esquema com base em nosso caso de uso no arquivo App.js no clique e no carregamento. Também precisamos importar os pacotes da Adobe Experience Platform .

import { MobileCore} from '@adobe/react-native-aepcore';
import {Edge, ExperienceEvent} from '@adobe/react-native-aepedge';
import {Identity} from '@adobe/react-native-aepedgeidentity'
import {
  Target,
  TargetOrder,
  TargetParameters,
  TargetPrefetchObject,
  TargetProduct,
  TargetRequestObject
} from '@adobe/react-native-aeptarget';

Carregar tela

var xdmData  = {"eventType":"web.webpagedetails.pageViews",
"_atag": {
    "customschema": {
        "pageInfo": {
            "pageName":"welcomescreen",
            "Channel":"reactapp",
            "userType":"testprofile3",
                           }
    }
},
"web" : {
    "webPageDetails":{
        "pageViews":{
            "value" : 1
        }
    } 
}
}
let experienceEvent = new ExperienceEvent(xdmData);
Edge.sendEvent(experienceEvent);

function expLink(){
var xdmData  = {"eventType":"web.webinteraction.linkClicks",
"_atag": {
    "customschema": {
    "linkInteraction": {
            "linkName":"test_link",
            "linkType":"other",
                           },
    "pageInfo": {
                  "pageName":"welcomescreen",
                  "Channel":"reactapp",
                  "userType":"testprofile3"
               }
    }
},
"web" : {
    "webInteraction":{
              "linkClicks":{
                    "value" : 1
                }
    }
  }
}
let experienceEvent = new ExperienceEvent(xdmData);
Edge.sendEvent(experienceEvent);

A inicialização do SDK deve ser feita em código nativo dentro do seu AppDelegate (iOS) e MainApplication (Android). Detalhes sobre como instalar e registrar as extensões necessárias para a implementação atual e capturar o rastreamento do ciclo de vida podem ser encontrados aqui .

https://developer.adobe.com/client-sdks/documentation/getting-started/get-the-sdk/

Validação por meio da Adobe Experience Platform Assurance

Usaremos a garantia da Adobe Experience Platform para a validação; caso precise de detalhes sobre a inicialização do Assurance, consulte

https://experienceleague.adobe.com/docs/platform-learn/implement-mobile-sdk/app-implementation/assurance.html?lang=en

Verificando chamadas de ciclo de vida

Vá para a seção Eventos do painel de navegação e procure o tipo de evento de ciclo de vida — certifique-se de que os eventos de ciclo de vida sejam disparados com base nas ações de ciclo de vida do aplicativo.

Criação de segmentos na Adobe Experience Platform

Gostaríamos de criar agora um segmento simples para os usuários cujo userType é igual a “testprofile3”. Estas são as etapas de criação de segmento padrão na Adobe Experience Platform

https://experienceleague.adobe.com/docs/platform-learn/tutorials/segments/create-segments.html?lang=en

Configurar destino de personalização

Agora podemos começar a configurar o destino de personalização. Para nosso caso de uso, usaremos o Adobe Target como destino. Consulte aqui para mais detalhes.

https://experienceleague.adobe.com/docs/experience-platform/destinations/catalog/personalization/adobe-target-connection.html?lang=en

Crie uma política de mesclagem Active-On-Edge

Após criarmos a conexão de destino, devemos criar uma política de mesclagem Active-On-Edge. Consulte aqui para mais detalhes.

https://experienceleague.adobe.com/docs/experience-platform/profile/merge-policies/ui-guide.html?lang=en

Ative o segmento para o destino

Agora vamos ativar o segmento que criamos para o destino Adobe Target .

Projete a personalização no aplicativo

Como todos os pré-requisitos da Adobe Experience Platform foram concluídos, passaremos para a criação de uma atividade. Para obter o caso de uso de personalização na página, adicionaremos um parâmetro de localização para o Adobe Target ao clicar. A ideia aqui será mostrar a experiência de clique para os usuários cujo tipo de usuário é igual a “testprofile3”.

Vamos adicionar algumas linhas de script no arquivo App.js, que serão acionadas com o clique do botão.

var request1 = new TargetRequestObject(
  'testpoctarget1',
  null,
  'defaultContent1',
  (error, content) => {
    if (error) {
      console.error(error);
    } else {
       console.log(
          "Adobe Target content:" +
            content +
            " Text Content: " +
            JSON.parse(content).text
        );
  targetresponse = JSON.parse(content).text;
        console.log(targetresponse);
    }
}
);

Agora podemos criar uma atividade no Adobe Target adicionando o mesmo parâmetro de localização que foi adicionado em App.js na etapa anterior, ou seja, “testpoctarget1”. Vamos selecionar o segmento que ativamos para o destino Adobe Target.

Para validar a atividade que está sendo entregue para o respectivo segmento, clique para disparar a chamada mbox e você poderá ver o JSON que adicionamos no Adobe Target .

Configurar o relatório [fonte do relatório como Adobe Analytics]

A próxima etapa seria selecionar a meta, desta vez selecionaremos o Adobe Analytics como fonte de relatório para que possamos ter o relatório A4T para medir a eficácia.

Aqui, precisamos estar extremamente atentos para executar algumas etapas como pré-requisito para habilitar o relatório A4T, que discutiremos na próxima seção

Ativando o A4T para reagir nativo

Para ativar o A4T, precisamos seguir os passos –

a) Adicionar extensão do Adobe Analytics à biblioteca de lançamento

b) Selecione o conjunto de relatórios do Adobe Analytics , precisamos criar um conjunto de relatórios, caso ainda não tenha sido criado

c) Adicionar mais um pacote NPM para habilitar o A4T

@adobe/react-native-acpanalytics

import {ACPAnalytics} from '@adobe/react-native-acpanalytics';

Analytics.registerExtension();

Crie um painel do espaço de trabalho A4T para medir a eficácia

Vamos agora criar um painel A4T rápido no espaço de trabalho de análise para ver se o A4T está funcionando conforme o esperado,

Resumo

Conforme mencionado acima, a integração da Adobe Experience Platform com o React Native Mobile Application usando o Mobile Edge SDK precisa ter pacotes npm específicos a serem instalados para ter rastreamento de medição. O Adobe Experience Platform Assurance pode ser usado para a validação. O A4T permite rastrear a eficácia das atividades de personalização do Adobe Target e pode ser obtido importando pacotes npm específicos, conforme mencionado acima.

As tecnologias móveis estão evoluindo dia a dia e, na Adobe, trabalhamos incansavelmente para acompanhar o cenário tecnológico em constante mudança para oferecer suporte a nossos clientes, ajudando-os e reduzindo o tempo para realizar várias integrações com a Adobe Experience Cloud.

Pensando em migrar para a Adobe Experience Cloud Platform? Entre em contato com os serviços profissionais da Adobe para uma experiência tranquila e enriquecedora.

E se você estiver interessado em aprender mais com nossos líderes de opinião sobre Serviços Profissionais, visite nossa página de séries de blogs .

Contribuintes

Asim Chatterjee é um arquiteto de marketing digital que trabalha com a Adobe, com mais de 12 anos de experiência em consultoria de negócios e tecnologia. A Asim ajuda as organizações que passam por Transformações de Marketing Digital, usando decisões baseadas em dados e oferecendo experiências omnicanal aos clientes.

Shikhar Saxena é Arquiteto Corporativo Sênior da Adobe, com mais de 17 anos de experiência. Ele é um tecnólogo prático com um histórico comprovado em arquitetar ecossistemas de experiência do cliente e reunir equipes de negócios e TI para trabalhar em conjunto para atingir a meta da organização: projetar e oferecer experiências excepcionais ao cliente.