Documentação Experience Platform Tutorial da Web

Visão geral

Última atualização: 5 de maio de 2025

Tópicos:

Criado para:

Iniciante
Intermediário
Desenvolvedor

Implementar o Experience Cloud em sites com tags é o ponto de partida perfeito para desenvolvedores front-end ou profissionais de marketing técnicos que desejam aprender como implementar as soluções da Adobe Experience Cloud no site.

Cada lição contém exercícios práticos e informações essenciais para ajudar você a implementar a Experience Cloud e compreender seu valor. Os sites de demonstração são fornecidos para que você complete o tutorial e possa aprender as técnicas subjacentes em um ambiente seguro. Após concluir este tutorial, você deve estar pronto para começar a implementar todas as suas soluções de marketing por meio de tags em seu próprio site.

INFO

Este tutorial usa extensões e bibliotecas específicas do aplicativo (AppMeasurement.js para Adobe Analytics, at.js para Adobe Target). Se você deseja implementar o Adobe Experience Platform Web SDK, consulte o tutorial Implementar o Adobe Experience Cloud com o Web SDK.

Depois de concluir este, você poderá:

Criar uma propriedade de tag
Instalar uma propriedade de tag em um site
Adicione as seguintes soluções da Adobe Experience Cloud:
- Serviço de identidade da Adobe Experience Platform
- Adobe Target
- Adobe Analytics
- Adobe Audience Manager
Crie regras e elementos de dados para enviar dados para as soluções da Adobe
Valide a implementação usando o Adobe Experience Cloud Debugger
Alterações no Publish por meio de ambientes de desenvolvimento, preparo e produção

OBSERVAÇÃO

O Adobe Experience Platform Launch está sendo integrado à Adobe Experience Platform como um conjunto de tecnologias de coleção de dados. Várias alterações de terminologia foram implementadas na interface do que você deve estar ciente ao usar esse conteúdo:

O Platform Launch (lado do cliente) agora é tags
O Platform Launch Server Side agora é event forwarding
As configurações do Edge agora são datastreams

OBSERVAÇÃO

Tutoriais de várias soluções semelhantes também estão disponíveis para o SDK da Web e o SDK móvel.

Pré-requisitos

Nessas lições, presume-se que você tenha uma Adobe ID e as permissões necessárias para concluir os exercícios. Caso contrário, pode ser necessário entrar em contato com o administrador da Experience Cloud para solicitar acesso.

Para tags, você deve ter permissão para desenvolver, aprovar, Publish, gerenciar extensões e gerenciar ambientes. Para obter mais informações sobre permissões de usuário de marca, consulte a documentação.
No Adobe Analytics, você deve conhecer o servidor de rastreamento e quais conjuntos de relatórios você usará para concluir este tutorial
Para o Audience Manager, você deve conhecer seu subdomínio do Audience Manager (também conhecido como "Nome do parceiro", "ID do parceiro" ou "Subdomínio do parceiro")

Além disso, pressupõe-se que você esteja familiarizado com linguagens de desenvolvimento front-end como HTML e JavaScript. Não é necessário ser um especialista nessas linguagens para concluir as lições, mas você extrairá mais delas se ler e entender o código confortavelmente.

Sobre tags

O recurso de tags da Adobe Experience Platform é a próxima geração de recursos de gerenciamento de tags de site e de SDKs móveis da Adobe. As tags oferecem aos clientes uma forma simples de implantar e gerenciar todas as soluções de análise, de marketing e de anúncios necessárias para potencializar experiências de cliente relevantes. Não há custo adicional para Tags. Ele está disponível para qualquer cliente da Adobe Experience Cloud.

As tags para sites permitem gerenciar centralmente todas as JavaScript relacionadas às soluções de análise, marketing e publicidade usadas em seu desktop e sites móveis. Por exemplo, se você implantar o Adobe Analytics, as tags gerenciarão a biblioteca JavaScript do AppMeasurement, preencherão variáveis e acionarão solicitações.

O conteúdo do container é minimizado, incluindo o código personalizado. Tudo é modular. Se você não precisar de um item, ele não será incluído na biblioteca. O resultado é uma implementação rápida e compacta.

Tags também é uma plataforma que permite que fornecedores de terceiros criem extensões para facilitar a implantação de suas soluções por meio de tags. Uma extensão é um pacote de código (JavaScript, HTML e CSS) que estende a interface das tags e a funcionalidade do cliente. Pense nas tags como um sistema operacional e nas extensões como os aplicativos usados para realizar as tarefas.

Sobre as lições

Nessas lições, você implementará a Adobe Experience Cloud em um site de varejo falso chamado Luma. O site Luma tem uma camada de dados avançada e uma funcionalidade que permitirá a criação de uma implementação realista. Você criará sua própria propriedade de tag, em sua própria organização da Experience Cloud, e a mapeará para o nosso site hospedado do Luma usando a Experience Cloud Debugger.

Obter as ferramentas

Como você estará usando algumas extensões específicas do navegador, recomendamos concluir o tutorial usando o navegador web Chrome
Adicione a extensão Adobe Experience Platform Debugger ao navegador Chrome

Copie o exemplo de código de página html

Exemplo de código de página html

<!doctype html>
<html lang="en">
<head>
    <title>Tags: Sample HTML Page</title>
    <!--Preconnect and DNS-Prefetch to improve page load time. REPLACE "techmarketingdemos" WITH YOUR OWN AAM PARTNER ID, TARGET CLIENT CODE, AND ANALYTICS TRACKING SERVER-->
    <link rel="preconnect" href="//dpm.demdex.net">
    <link rel="preconnect" href="//fast.techmarketingdemos.demdex.net">
    <link rel="preconnect" href="//techmarketingdemos.demdex.net">
    <link rel="preconnect" href="//cm.everesttech.net">
    <link rel="preconnect" href="//techmarketingdemos.tt.omtrdc.net">
    <link rel="preconnect" href="//techmarketingdemos.sc.omtrdc.net">
    <link rel="dns-prefetch" href="//dpm.demdex.net">
    <link rel="dns-prefetch" href="//fast.techmarketingdemos.demdex.net">
    <link rel="dns-prefetch" href="//techmarketingdemos.demdex.net">
    <link rel="dns-prefetch" href="//cm.everesttech.net">
    <link rel="dns-prefetch" href="//techmarketingdemos.tt.omtrdc.net">
    <link rel="dns-prefetch" href="//techmarketingdemos.sc.omtrdc.net">
    <!--/Preconnect and DNS-Prefetch-->
    <!--Data Layer to enable rich data collection and targeting-->
    <script>
    var digitalData = {
        "page": {
            "pageInfo" : {
                "pageName": "Home"
                }
            }
    };
    </script>
    <!--/Data Layer-->
    <!--jQuery or other helper libraries-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!--/jQuery-->
    <!--Tags Header Embed Code: REPLACE THE NEXT LINE WITH THE EMBED CODE FROM YOUR OWN DEVELOPMENT ENVIRONMENT-->
    <script src="//assets.adobedtm.com/launch-EN93497c30fdf0424eb678d5f4ffac66dc.min.js" async></script>
    <!--/Tags Header Embed Code-->
</head>
<body>
    <h1>Tags: Sample HTML Page</h1>
    <p>This is a very simple page to demonstrate basic implementation concepts of Tags</p>
    <p>See <a href="https://docs.adobe.com/content/help/pt-BR/experience-cloud/implementing-in-websites-with-launch/index.html">Implementing the Experience Cloud in Websites with Tags</a> for the complete tutorial</p>
</body>
</html>

Obtenha um editor de texto no qual é possível fazer alterações na página html de exemplo. (Se você não tiver um, recomendamos experimentar o Brackets)
Marcar o site Luma

NOTE

Você pode achar mais fácil concluir este tutorial com o site Luma aberto no Chrome, ao ler este tutorial e concluir as etapas da interface da Coleção de dados em um navegador diferente.

Vamos começar!

Próximo: "Criar uma propriedade de tag" >

recommendation-more-help