Componentes principais do AEM-CIF e integração com o Adobe Experience Platform

A variável Commerce Integration Framework (CIF) Os componentes principais fornecem integração perfeita com Adobe Experience Platform para encaminhar eventos da loja e seus dados de interações do lado do cliente, como adicionar ao carrinho.

A variável Componentes principais da CIF do AEM O projeto fornece uma biblioteca JavaScript chamada Conector do Adobe Experience Platform para Adobe Commerce para coletar dados do evento na sua loja do Commerce. Esses dados de evento são enviados para o Experience Platform onde são usados em outros produtos da Adobe Experience Cloud, como Adobe Analytics e Adobe Target, para criar um perfil de 360 graus que cobre uma jornada do cliente. Conectando os dados do Commerce a outros produtos na Adobe Experience Cloud, você pode executar tarefas como analisar o comportamento do usuário no seu site, executar testes AB e criar campanhas personalizadas.

Saiba mais sobre o Coleta de dados Experience Platform conjunto de tecnologias que permitem coletar dados de experiência do cliente de fontes do lado do cliente.

Enviar addToCart dados do evento para Experience Platform

As etapas a seguir mostram como enviar a addToCart dados de evento de páginas de produto renderizadas pelo AEM para o Experience Platform usando o Conector CIF - Experience Platform. Usando a extensão do navegador Adobe Experience Platform Debugger, você pode testar e revisar os dados enviados.

Pré-requisitos

Você deve usar um ambiente de desenvolvimento local para concluir esta demonstração. Isso inclui uma instância do AEM em execução que está configurada e conectada a uma instância do Adobe Commerce. Revise os requisitos e as etapas para configuração do desenvolvimento local com o SDK as a Cloud Service do AEM.

Você também precisa de acesso ao Adobe Experience Platform e permissões para criar o esquema, o conjunto de dados e as sequências de dados para a coleta de dados. Para obter mais informações, consulte Gerenciamento de permissões.

Configuração as a Cloud Service do AEM Commerce

Para ter uma AEM Commerce as a Cloud Service ambiente local com o código e a configuração necessários, conclua as etapas a seguir.

Configuração local

Siga as Configuração local etapas para ter um ambiente as a Cloud Service de comércio AEM em funcionamento.

Configuração do projeto

Siga as Arquétipo de projeto AEM etapas para criar um novo projeto de comércio de AEM (CIF).

Crie e implante o projeto recém-criado do Comércio de AEM no SDK AEM local executando o seguinte comando no diretório raiz do projeto.

$ mvn clean install -PautoInstallSinglePackage

A implantação local My Demo StoreFront o site de comércio eletrônico com código e conteúdo padrão é semelhante ao seguinte:

Instalar dependências de conectores Peregrine e CIF-AEP

Para coletar e enviar os dados do evento das páginas de categoria e produto deste site do AEM Commerce, é necessário instalar a chave npm pacotes na ui.frontend módulo do projeto AEM Commerce.

Navegue até a ui.frontend e instale os pacotes necessários executando os seguintes comandos na linha de comando.

npm i --save lodash.get@^4.4.2 lodash.set@^4.3.2
npm i --save apollo-cache-persist@^0.1.1
npm i --save redux-thunk@~2.3.0
npm i --save @adobe/apollo-link-mutation-queue@~1.1.0
npm i --save @magento/peregrine@~12.5.0
npm i --save @adobe/aem-core-cif-react-components --force
npm i --save-dev @magento/babel-preset-peregrine@~1.2.1
npm i --save @adobe/aem-core-cif-experience-platform-connector --force

Configurar Maven para usar --force argumento

Como parte do processo de build do Maven, a instalação npm clean (usando npm ci) é acionado. Isso também exige que os --force argumento.

Navegue até o arquivo POM raiz do projeto pom.xml e localize o <id>npm ci</id> bloco de execução. Atualize o bloco para que tenha a seguinte aparência:

<execution>
    <id>npm ci</id>
    <goals>
    <goal>npm</goal>
    </goals>
    <configuration>
    <arguments>ci --force</arguments>
    </configuration>
</execution>

Alterar formato de configuração do Babel

Alternar do padrão .babelrc formato do arquivo de configuração relativo ao arquivo para babel.config.js formato. Este é um formato de configuração para todo o projeto e permite que plug-ins e predefinições sejam aplicados à node_module com maior controle.

1. Navegue até a ui.frontend módulo e excluir o existente .babelrc arquivo.

2. Criar um babel.config.js arquivo que usa o peregrine predefinição.

   const peregrine = require('@magento/babel-preset-peregrine');
   
   module.exports = (api, opts = {}) => {
       const config = {
           ...peregrine(api, opts),
           sourceType: 'unambiguous'
       }
   
       config.plugins = config.plugins.filter(plugin => plugin !== 'react-refresh/babel');
   
       return config;
   }
   

Configurar o webpack para usar o Babel

Para transcompilar os arquivos JavaScript usando o carregador Babel (babel-loader) e webpack, é necessário modificar o webpack.common.js arquivo.

Navegue até a ui.frontend módulo e atualize o webpack.common.js para que a seguinte regra esteja no estado module valor da propriedade:

{
    test: /\.jsx?$/,
    exclude: /node_modules\/(?!@magento\/)/,
    loader: 'babel-loader'
}

Configurar cliente Apollo

A variável Cliente Apollo O é usado para gerenciar dados locais e remotos com o GraphQL. Ele também armazena os resultados de consultas do GraphQL em um cache local normalizado na memória.

Para InMemoryCache para trabalhar com eficiência, você precisa de uma possibleTypes.js arquivo. Para gerar esse arquivo, consulte Gerando possibleTypes automaticamente. Além disso, consulte a Implementação de referência do PWA Studio e um exemplo de um possibleTypes.js arquivo.

1. Navegue até a ui.frontend e salve o arquivo como ./src/main/possibleTypes.js

2. Atualize o webpack.common.js do arquivo DefinePlugin para substituir as variáveis estáticas necessárias durante o tempo de criação.

   const { DefinePlugin } = require('webpack');
   const { POSSIBLE_TYPES } = require('./src/main/possibleTypes');
   
   ...
   
   plugins: [
       ...
       new DefinePlugin({
           'process.env.USE_STORE_CODE_IN_URL': false,
           POSSIBLE_TYPES
       })
   ]
   

Inicializar os componentes principais de Peregrine e CIF

Para inicializar os componentes principais do Peregrine e da CIF baseados no React, crie a configuração necessária e os arquivos JavaScript.

1. Navegue até a ui.frontend e crie a seguinte pasta: src/main/webpack/components/commerce/App

2. Criar um config.js arquivo com o seguinte conteúdo:

   // get and parse the CIF store configuration from the <head>
   const storeConfigEl = document.querySelector('meta[name="store-config"]');
   const storeConfig = storeConfigEl ? JSON.parse(storeConfigEl.content) : {};
   
   // the following global variables are needed for some of the peregrine features
   window.STORE_VIEW_CODE = storeConfig.storeView || 'default';
   window.AVAILABLE_STORE_VIEWS = [
       {
           code: window.STORE_VIEW_CODE,
           base_currency_code: 'USD',
           default_display_currency_code: 'USD',
           id: 1,
           locale: 'en',
           secure_base_media_url: '',
           store_name: 'My Demo StoreFront'
       }
   ];
   window.STORE_NAME = window.STORE_VIEW_CODE;
   window.DEFAULT_COUNTRY_CODE = 'en';
   
   export default {
       storeView: window.STORE_VIEW_CODE,
       graphqlEndpoint: storeConfig.graphqlEndpoint,
       // Can be GET or POST. When selecting GET, this applies to cache-able GraphQL query requests only.
       // Mutations will always be executed as POST requests.
       graphqlMethod: storeConfig.graphqlMethod,
       headers: storeConfig.headers,
   
       mountingPoints: {
           // TODO: define the application specific mount points as they may be used by <Portal> and <PortalPlacer>
       },
       pagePaths: {
           // TODO: define the application specific paths/urls as they may be used by the components
           baseUrl: storeConfig.storeRootUrl
       },
       eventsCollector: {
           // Enable the Experience Platform Connector and define the org and datastream to use
           aep: {
               orgId: // TODO: add your orgId
               datastreamId: // TODO: add your datastreamId
           }
       }
   };
   

   IMPORTANTE

   Embora você já esteja familiarizado com o config.js arquivo de Guias do AEM - Projeto CIF Venia, há algumas alterações que você precisa fazer nesse arquivo. Primeiro, analise qualquer TODO comentários. Em seguida, dentro do eventsCollector propriedade, localize o eventsCollector > aed objeto e atualizar o orgId e datastreamId aos valores corretos. Saiba mais.

3. Criar um App.js com o seguinte conteúdo. Esse arquivo se assemelha a um arquivo de ponto de partida típico do aplicativo React e contém ganchos React e personalizados e uso de Contexto React para facilitar a integração de Experience Platform.

   import config from './config';
   
   import React, { useEffect } from 'react';
   import ReactDOM from 'react-dom';
   import { IntlProvider } from 'react-intl';
   import { BrowserRouter as Router } from 'react-router-dom';
   import { combineReducers, createStore } from 'redux';
   import { Provider as ReduxProvider } from 'react-redux';
   import { createHttpLink, ApolloProvider } from '@apollo/client';
   import { ConfigContextProvider, useCustomUrlEvent, useReferrerEvent, usePageEvent, useDataLayerEvents, useAddToCartEvent } from '@adobe/aem-core-cif-react-components';
   import { EventCollectorContextProvider, useEventCollectorContext } from '@adobe/aem-core-cif-experience-platform-connector';
   import { useAdapter } from '@magento/peregrine/lib/talons/Adapter/useAdapter';
   import { customFetchToShrinkQuery } from '@magento/peregrine/lib/Apollo/links';
   import { BrowserPersistence } from '@magento/peregrine/lib/util';
   import { default as PeregrineContextProvider } from '@magento/peregrine/lib/PeregrineContextProvider';
   import { enhancer, reducers } from '@magento/peregrine/lib/store';
   
   const storage = new BrowserPersistence();
   const store = createStore(combineReducers(reducers), enhancer);
   
   storage.setItem('store_view_code', config.storeView);
   
   const App = () => {
       const [{ sdk: mse }] = useEventCollectorContext();
   
       // trigger page-level events
       useCustomUrlEvent({ mse });
       useReferrerEvent({ mse });
       usePageEvent({ mse });
       // listen for add-to-cart events and enable forwarding to the magento storefront events sdk
       useAddToCartEvent(({ mse }));
       // enable CIF specific event forwarding to the Adobe Client Data Layer
       useDataLayerEvents();
   
       useEffect(() => {
           // implement a proper marketing opt-in, for demo purpose we hard-set the consent cookie
           if (document.cookie.indexOf('mg_dnt') < 0) {
               document.cookie += '; mg_dnt=track';
           }
       }, []);
   
       // TODO: use the App to create Portals and PortalPlaceholders to mount the CIF / Peregrine components to the server side rendered markup
       return <></>;
   };
   
   const AppContext = ({ children }) => {
       const { storeView, graphqlEndpoint, graphqlMethod = 'POST', headers = {}, eventsCollector } = config;
       const { apolloProps } = useAdapter({
           apiUrl: new URL(graphqlEndpoint, window.location.origin).toString(),
           configureLinks: (links, apiBase) =>
               // reconfigure the HTTP link to use the configured graphqlEndpoint, graphqlMethod and storeView header
   
               links.set('HTTP', createHttpLink({
                   fetch: customFetchToShrinkQuery,
                   useGETForQueries: graphqlMethod !== 'POST',
                   uri: apiBase,
                   headers: { ...headers, 'Store': storeView }
               }))
       });
   
       return (
           <ApolloProvider {...apolloProps}>
               <IntlProvider locale='en' messages={{}}>
                   <ConfigContextProvider config={config}>
                       <ReduxProvider store={store}>
                           <PeregrineContextProvider>
                               <EventCollectorContextProvider {...eventsCollector}>
                                   {children}
                               </EventCollectorContextProvider>
                           </PeregrineContextProvider>
                       </ReduxProvider>
                   </ConfigContextProvider>
               </IntlProvider>
           </ApolloProvider>
       );
   };
   
   window.onload = async () => {
       const root = document.createElement('div');
       document.body.appendChild(root);
   
       ReactDOM.render(
           <Router>
               <AppContext>
                   <App />
               </AppContext>
           </Router>,
           root
       );
   };
   

   A variável EventCollectorContext exporta o React Context que:

   • carrega a biblioteca commerce-events-sdk e commerce-events-collector,
   • inicializa com uma determinada configuração para Experience Platform e/ou ACDS
   • assina todos os eventos do Peregrine e os encaminha para o SDK de eventos

   Você pode revisar os detalhes de implementação da EventCollectorContext aqui.

Criar e implantar o projeto AEM atualizado

Para garantir que as alterações de instalação, código e configuração do pacote acima estejam corretas, recrie e implante o projeto atualizado do Comércio de AEM usando o seguinte comando Maven: $ mvn clean install -PautoInstallSinglePackage.

configuração do Experience Platform

Para receber e armazenar os dados do evento provenientes das páginas do AEM Commerce, como categoria e produto, conclua as seguintes etapas:

Criar esquema com o grupo de campos Comércio

Para definir a estrutura para dados de evento de comércio, você deve criar um esquema do Experience Data Model (XDM). Um esquema é um conjunto de regras que representam e validam a estrutura e o formato dos dados.

1. No navegador, navegue até a janela Adobe Experience Platform Página inicial do produto. Por exemplo, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.

2. Localize o Esquemas na seção de navegação à esquerda, clique na guia Criar esquema na seção superior direita e selecione XDM ExperienceEvent.

   

3. Nomeie seu esquema usando o Propriedades do esquema > Nome de exibição e adicionar Grupos de campos usando o Composição > Grupos de campos > Adicionar botão.

   

4. No Adicionar grupos de campos , pesquisar Commerce, selecione o Detalhes do comércio e clique em Adicionar grupos de campos.

   

Criar conjunto de dados

Para armazenar os dados do evento, você deve criar um Conjunto de dados que esteja em conformidade com a definição do esquema. Um conjunto de dados é uma construção de armazenamento e gerenciamento para uma coleção de dados, normalmente uma tabela, que contém um esquema (colunas) e campos (linhas).

1. No navegador, navegue até a janela Adobe Experience Platform Página inicial do produto. Por exemplo, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.

2. Localize o Conjuntos de dados na seção de navegação à esquerda e clique no botão Criar conjunto de dados na seção superior direita.

   

3. Na nova página, selecione Criar conjunto de dados a partir do esquema cartão.

   

• Na nova página, pesquisar e selecionar o schema criado na etapa anterior e clique em Próxima botão.

  

1. Nomeie seu conjunto de dados usando o Configurar conjunto de dados > Nome e clique no botão Concluir botão.

   

Criar sequência de dados

Conclua as etapas a seguir para criar uma sequência de dados no Experience Platform.

1. No navegador, navegue até a janela Adobe Experience Platform Página inicial do produto. Por exemplo, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.

2. Localize o Datastreams na seção de navegação à esquerda e clique no botão Nova sequência de dados na seção superior direita.

   

3. Nomeie sua sequência de dados usando o Nome campo obrigatório. No Esquema de evento selecione o esquema recém-criado e clique em Salvar.

   

4. Abra o fluxo de dados recém-criado e clique em Adicionar serviço.

   

5. No Serviço selecione o Adobe Experience Platform opção. Em Conjunto de dados do evento selecione o nome do conjunto de dados na etapa anterior e clique em Salvar.

   

Adicionar valor de sequência de dados à configuração do AEM Commerce

Após concluir a configuração do Experience Platform acima, você deve ter datastreamId no painel à esquerda dos detalhes do fluxo de dados e orgId no canto superior direito da Imagem do perfil > Informações da conta > Informações do usuário modal.

1. No relatório do projeto AEM Commerce ui.frontend módulo, atualize o config.js arquivo e especificamente o eventsCollector > aep propriedades do objeto.

2. Criar e implantar o projeto atualizado do AEM Commerce

Acionador addToCart evento e verificação da coleta de dados

As etapas acima concluem a configuração do AEM Commerce e Experience Platform. Agora você pode acionar um addToCart evento e verificar a coleta de dados usando o depurador e o conjunto de dados do Experience Platform Métricas e gráficos alternar na interface do usuário do produto.

Para acionar o evento, você pode usar o autor de AEM ou o serviço de publicação da configuração local. Neste exemplo, use o autor de AEM para fazer logon em sua conta.

1. Na página Sites, selecione a Minha loja de demonstraçãoFront > nós > pt-BR e clique em Editar na barra de ação superior.

2. Na barra de ação superior, clique em Exibir como publicado, em seguida, clique em qualquer categoria preferencial na navegação da loja.

3. Clique em qualquer cartão de produto preferido no Página do produto e selecione cor, tamanho para habilitar o Adicionar ao carrinho botão.

4. Abra o Adobe Experience Platform Debugger extensão no painel de extensão do navegador e selecione Experience Platform Wed SDK no painel esquerdo.

   

5. Retorne para a Página do produto e clique em Adicionar ao carrinho botão. Isso envia dados para o Experience Platform. A variável Adobe Experience Platform Debugger A extensão do mostra os detalhes do evento.

   

6. Na interface do produto Experience Platform, navegue até o Conjuntos de dados > My Demo StoreFront, no âmbito do Atividade do conjunto de dados guia. Se a variável Métricas e gráficos for ativado, as estatísticas de dados do evento serão exibidas.

   

Detalhes da implementação

A variável Conector de Experience Platform da CIF O é criado sobre o Conector Experience Platform para Adobe Commerce, que faz parte da PWA Studio projeto.

O projeto PWA Studio permite criar vitrines de Progressive Web Application (PWA) alimentadas por Adobe Commerce ou Magento Open Source. O projeto também contém uma biblioteca de componentes chamada Peregrin para adicionar lógica aos componentes visuais. A variável Biblioteca Peregrin também fornece os ganchos personalizados do React usados pelo Conector Experience Platform para integrar com o Experience Platform sem interrupções.

Eventos suportados

A partir de agora, os seguintes eventos serão compatíveis:

Eventos XDM da experiência:

1. Adicionar ao carrinho (AEM)
2. Visualizar página (AEM)
3. Exibir produto (AEM)
4. Solicitação de pesquisa enviada (AEM)
5. Resposta de pesquisa recebida (AEM)

Quando Componentes Peregrine são reutilizados no projeto AEM Commerce:

Eventos XDM da experiência:

1. Remover do carrinho
2. Abrir carrinho
3. Exibir carrinho
4. Compra instantânea
5. Iniciar check-out
6. Concluir check-out

Eventos XDM do perfil:

1. Conectar
2. Criar conta
3. Editar conta

Recursos adicionais

Para obter mais informações, consulte os seguintes recursos:

• PWA Studio
• Visão geral do conector Experience Platform
• Eventos do conector Experience Platform
• Visão geral do Adobe Experience Platform

Recursos do Business.Adobe.com