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

Última atualização em 2024-03-01
  • Criado para:
  • Beginner
    Developer

Os componentes principais da estrutura de integração Comércio (CIF) fornecem integração perfeita com Adobe Experience Platform para encaminhar eventos de vitrine e seus dados a partir de interações lado do cliente como adicionar a carrinho.

O projeto AEM Componentes principais de CIF fornece uma JavaScript biblioteca chamada Adobe Experience Platform conector para Adobe Systems Comércio coletar dados do evento da sua vitrine Comércio. Essa dados do evento é enviada para o Experience Platform onde é usada em outros Adobe Experience Cloud produtos, como Adobe Analytics e Adobe Target para build um perfil de 360 graus que abrange um jornada do cliente. Ao conectar Comércio dados a outros produtos no Adobe Experience Cloud, é possível realizar tarefas curtir analisar usuário comportamento em seu site, realizar Teste AB e criar campanhas personalizadas.

Saiba mais sobre o conjunto Experience Platform de coleção de dados das tecnologias que permite coletar experiência do cliente dados de fontes 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 por 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.

Revisar dados do evento addToCart no Adobe Experience Platform Debugger

Pré-requisitos

Use um ambiente de desenvolvimento local para concluir esta demonstração. Isso inclui uma instância de execução de AEM configuradas e conectadas a uma Adobe Systems Comércio instância. Revise os requisitos e as etapas para configurar o desenvolvimento local com AEM como um SDK Cloud Service.

Você também precisa de acesso a Adobe Experience Platform e permissões para criar schema, conjunto de dados e fluxos de dados para coleção de dados. Para obter mais informações, consulte Gerenciamento de permissões.

AEM Comércio como uma configuração Cloud Service

Para ter um AEM Comércio de trabalho como Cloud Service ambiente local com o código e a configuração necessários, conclua as seguintes etapas.

Configuração local

Siga as Configuração local etapas para que você possa 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).

DICA

No exemplo a seguir, o AEM Comércio projeto é nomeado: My Demo Storefront, no entanto, você pode escolher seu próprio nome de projeto.

Projeto do AEM Comércio

Crie e implante o projeto de comércio do AEM criado 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:

Site padrão de comércio AEM

Instalar dependências de 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, instale 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
IMPORTANTE

Às --force vezes, o argumento é necessário, pois PWA Studio é restritivo com as dependências de pares suportadas. Normalmente, isso não deve causar problemas.

Configurar o Maven para usar --force o argumento

Como parte do processo de build do Maven, a instalação limpa npm (usando npm ci) é acionada. Isso também requer o --force argumento.

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

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

Alterar formato de configuração Babel

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

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

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

    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 webpack para usar Babel

Para transpilar os arquivos JavaScript usando babel loader (babel-loader) e webpack, edite o webpack.common.js arquivo.

Navegue até a ui.frontend módulo e atualize o webpack.common.js arquivo para que você possa ter as seguintes regra dentro do module valor propriedade:

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

Configurar o 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 Geração de possíveis tipos automaticamente. Além disso, consulte o PWA Studio de referência implementação e um exemplo de arquivo possibleTypes.js .

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

  2. Atualize a webpack.common.js seção do DefinePlugin arquivo para que você possa substituir as variáveis estáticas necessárias durante build tempo.

    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 de Peregrino e CIF

Para inicializar os componentes principais de Peregrine e CIF baseados em Reação, crie a configuração necessária e os arquivos JavaScript.

  1. Navegue até o ui.frontend módulo 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: {
            eventForwarding: {
                acds: true,
                aep: false,
            }
        }
    };
    
    IMPORTANTE

    Embora você já esteja familiarizado com o config.js arquivo de Guias do AEM - Projeto CIF Venia, há algumas alterações que você deve fazer nesse arquivo. Primeiro, analise qualquer TODO comentários. Em seguida, dentro do eventsCollector propriedade, localize o eventsCollector > aep 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 you 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
        );
    };
    

    Exporta EventCollectorContext o Contexto de reação que:

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

    Você pode analisar os detalhes implementação aqui EventCollectorContext 🔗.

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 armazenamento os dados do evento provenientes das páginas AEM Comércio como categoria e produtos, conclua as seguintes etapas:

DISPONIBILIDADE

Certifique-se de fazer parte dos Perfis de produto corretos ____ em Adobe Experience Platform e Adobe Experience Platform coleta de dados. Se necessário, trabalhe com o administrador do sistema para criar, atualizar ou atribuir perfis de produto à Admin Console.

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). Uma schema é 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.

    Criar esquema da AEP

  3. Nomeie sua schema usando o campo Esquema Propriedades > Nome de exibição e adicione grupos de Campos usando os grupos de Campo de > composição > Adicionar botão.

    Definição do esquema AEP

  4. Na caixa de diálogo Adicionar grupos de campo, pesquisa forCommerce, selecione a caixa de seleção Comércio Detalhes e clique em Adicionar grupos de campo.

    Definição do esquema AEP

DICA

Consulte as noções básicas de schema composição para obter mais informações.

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 menu Conjuntos de dados na seção de navegação esquerda e clique na Criar conjunto de dados botão na seção superior direita.

    Conjuntos de dados do AEP Criar

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

    Opção Criar esquema de conjuntos de dados da AEP

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

    Criar conjuntos de dados da AEP Selecionar esquema

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

    Nome dos conjuntos de dados do AEP Criar

DICA

Consulte a visão geral🔗 dos conjuntos de dados para obter mais informações.

Datastream do Criar

Todos os Apps as etapas a seguir para poder criar uma sequência de dados no Experience Platform.

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

  2. Localize o menu Datastreams na seção de navegação esquerda e clique no Novo datastream botão na seção superior direita.

    Fluxos de dados do AEP Criar

  3. Nomeie seu datastream usando o campo Nome obrigatório. No campo Esquema de eventos, selecione a schema criada e clique Salvar.

    Definir datastreams da AEP

  4. Abra a sequência de dados criada e clique em Adicionar serviço.

    Serviço de adição de fluxos de dados AEP

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

    Fluxos de dados do AEP adicionam detalhes do serviço

DICA

Consulte a Visão geral da sequência de dados para obter mais informações.

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

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

ID de fluxos de dados do AEP

  1. Na módulo do ui.frontend projeto AEM Comércio, atualize o config.js arquivo e especificamente as propriedades do eventsCollector > aep objeto.

  2. Criar e implantar o projeto de AEM Comércio atualizado

Acione addToCart evento e verifique coleção de dados

As etapas acima completam o AEM Comércio e a configuração Experience Platform. Agora você pode acionar uma addToCart evento e verificar coleção de dados usando a extensão Google Cromo Snowplow Inspector e conjunto de dados Metrics and graphs alternar no interface do produto.

Para acionar o evento, você pode usar o autor de AEM ou o serviço de publicação da configuração local. Para este exemplo, use AEM autor fazendo logon na 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 a extensão Inspetor Snowplow no painel de extensão do navegador e selecione Experience Platform SDK do Wed na painel esquerda.

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

    Dados de evento do depurador da AEP adicionados ao carrinho

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

    Estatísticas de dados do conjunto de dados Experience Platform

Detalhes da implementação

O CIF Experience Platform Connector é construído sobre a Conexão de dados para Adobe Systems Comércio, que faz parte do projeto PWA Studio .

O projeto PWA Studio permite criar vitrines Progressive Web Application (PWA) fornecidas por Adobe Systems Comércio ou Magento Open Source. O projeto também contém um componente biblioteca chamado Peregrin para adicionar lógica a componentes visuais. O biblioteca Peregrin também fornece os ganchos React personalizados que são usados pelo CIF Experience Platform Connector para integrar a Experience Platform perfeitamente.

Eventos suportados

A partir de agora, os seguintes eventos são suportados:

Eventos de experiência XDM:

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

Quando os componentes Peregrinos são reutilizados no projeto AEM Comércio:

Eventos de experiência XDM:

  1. Remover do carrinho
  2. Abrir carrinho
  3. Exibir carrinho
  4. Compra instantânea
  5. Check-out do Início
  6. Check-out do Todos os Apps

Eventos XDM de perfil:

  1. Fazer logon
  2. Criar conta
  3. Editar conta

Recursos adicionais

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

Nesta página