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

O Commerce Integration Framework (CIF) os componentes principais fornecem integração perfeita com Adobe Experience Platform para encaminhar eventos de vitrine e seus dados de interações do lado do cliente, como adicionar ao carrinho.

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

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

Enviar addToCart dados de evento para Experience Platform

As etapas a seguir mostram como enviar a variável addToCart dados de evento de páginas de produto renderizadas AEM para o Experience Platform usando o Conector CIF - Experience Platform. Ao usar a extensão de navegador do Adobe Experience Platform Debugger, é possível testar e revisar os dados enviados.

Pré-requisitos

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

Você também precisa acessar o Adobe Experience Platform e permissões para criar o esquema, o conjunto de dados e os conjuntos 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 trabalhar 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 AEM Commerce.

Configuração do projeto

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

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

$ mvn clean install -PautoInstallSinglePackage

Os My Demo StoreFront site de comércio com código e conteúdo padrão é semelhante ao seguinte:

Instale as dependências do conector 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 os pacotes no ui.frontend módulo do projeto AEM Commerce.

Navegue até o ui.frontend e instale os pacotes necessários executando os seguintes comandos a partir da 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

Configure o Maven para usar --force argumento

Como parte do processo de compilação Maven, a instalação de limpeza de npm (usando npm ci) é acionado. Isso também requer que o --force argumento .

Navegue até o arquivo POM raiz do projeto pom.xml e localize a <id>npm ci</id> bloco de execução. Atualize o bloco para que ele se pareça com o seguinte:

<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 a partir do padrão .babelrc formato de arquivo de configuração relativo do arquivo para babel.config.js formato. Este é um formato de configuração de todo o projeto e permite que os plug-ins e as predefinições sejam aplicados à variável node_module com maior controle.

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

2. Crie um babel.config.js 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;
   }
   

Configure o webpack para utilizar o Babel

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

Navegue até o ui.frontend e atualize o webpack.common.js para ter a seguinte regra dentro do module valor da propriedade:

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

Configurar o cliente Apollo

O Cliente Apollo é usada para gerenciar dados locais e remotos com o GraphQL. Ele também armazena os resultados de consultas GraphQL em um cache local, normalizado, na memória.

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

1. Navegue até o 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 componentes principais do Peregrine e da CIF

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

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

2. Crie 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 já possa estar familiarizado com o config.js arquivo de Guias de AEM - Projeto CIF Venia, há algumas alterações que você precisa fazer neste arquivo. Primeiro, revise qualquer TODO comentários. Em seguida, dentro do eventsCollector , encontre a eventsCollector > aed e atualize o orgId e datastreamId para os valores corretos. Saiba mais.

3. Crie um App.js com o seguinte conteúdo. Esse arquivo se parece com um arquivo típico de ponto de partida do aplicativo React e contém ganchos React e personalizados e o uso React Context para facilitar a integração do 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
       );
   };
   

   O EventCollectorContext exporta o Contexto de Reação que:

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

   Você pode revisar os detalhes de implementação da variável EventCollectorContext here.

Criar e implantar o projeto de 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 AEM Commerce atualizado 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 de Comércio de AEM, como categoria e produto, execute as seguintes etapas:

Criar esquema com 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é o Adobe Experience Platform página inicial do produto. Por exemplo, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.

2. Localize a variável Esquemas na seção de navegação à esquerda, clique no botão Criar esquema na seção superior direita e selecione ExperiênciaEvento XDM.

   

3. Nomeie seu esquema usando a variável 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 diálogo, pesquisar por Commerce, selecione o Detalhes de 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é o Adobe Experience Platform página inicial do produto. Por exemplo, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.

2. Localize a variável 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 esquema criado na etapa anterior e clique no botão Próximo botão.

  

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

   

Criar fluxo de dados

Complete as etapas a seguir para criar um Datastream no Experience Platform.

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

2. Localize a variável Datastreams na seção de navegação à esquerda e clique no botão Novo fluxo de dados na seção superior direita.

   

3. Nomeie seu conjunto de dados usando o Nome campo obrigatório. Em Esquema do evento , selecione o schema recém-criado e clique em Salvar.

   

4. Abra o Datastream recém-criado e clique em Adicionar Serviço.

   

5. Em 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 armazenamento de dados à configuração AEM Commerce

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

1. No projeto do AEM Commerce ui.frontend , atualize o config.js e especificamente o eventsCollector > aep propriedades do objeto.

2. Crie e implante o projeto AEM Commerce atualizado

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

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

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

1. Na página Sites , selecione o My Demo StoreFront > us > en e clique em Editar na barra de ação superior.

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

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

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

   

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

   

6. Na interface do usuário do produto Experience Platform, navegue até o Conjuntos de dados > Minha loja de demonstraçãoFrente nos termos do Atividade do conjunto de dados guia . Se a variável Métricas e gráficos for ativada, as estatísticas de dados de evento serão exibidas.

   

Detalhes da implementação

O Conector do Experience Platform da CIF é criado sobre o Conector Experience Platform para Adobe Commerce, que faz parte do PWA Studio projeto.

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

Eventos compatíveis

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

Eventos do Experience XDM:

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

When Componentes peregrinos são reutilizadas no projeto AEM Commerce:

Eventos do Experience XDM:

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

Eventos XDM de 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
• Experience Platform Connector Events
• Visão geral do Adobe Experience Platform

Recursos do Business.Adobe.com