概要

Last update: Tue Jul 16 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

初心者
中級
開発者

Tags を使用して web サイトにExperience Cloudを実装する は、web サイトにAdobe Experience Cloud ソリューションを実装する方法を学びたいと考えているフロントエンド開発者やテクニカルマーケターにとって最適な出発点になります。

各レッスンには、Experience Cloud の実装およびその価値を理解するのに役立つ、ハウツー演習や基本的な情報が含まれています。デモを完了するためのデモサイトが提供されているので、基本的な技術を安全な環境で学習することができます。このチュートリアルを完了すると、独自の web サイトのタグを使用して、すべてのマーケティングソリューションの実装を開始する準備が整います。

INFO

このチュートリアルでは、アプリケーション固有の拡張機能およびライブラリ（Adobe AnalyticsのAppMeasurement.js、Adobe Targetの at.js）を使用します。 Adobe Experience Platform Web SDK の実装を行う場合は、Web SDK を使用したAdobe Experience Cloudの実装チュートリアルを参照してください。

このチュートリアルでは、以下の内容について学習します。

タグプロパティの作成
Web サイトへのタグプロパティのインストール
次の Adobe Experience Cloud ソリューションを追加する
- Adobe Experience Platform ID サービス
- Adobe Target
- Adobe Analytics
- Adobe Audience Manager
ルールとデータ要素を作成し、データをアドビソリューションに送信する
Adobe Experience Cloud デバッガーを使用して実装を検証する
開発環境、ステージング環境、実稼動環境を通じたPublishの変更

NOTE

Adobe Experience Platform Launch は、データ収集テクノロジーのスイートとして Adobe Experience Platform に統合されています。このコンテンツを使用する際に注意する必要があるインターフェイスで、いくつかの用語がロールアウトされました。

Platform launch（クライアントサイド）が tags になりました
Platform launchサーバーサイドが event forwarding になりました
Edgeの設定が datastreams になりました

NOTE

Web SDK と Mobile SDK に関する同様のマルチソリューションチュートリアルも利用できます。

前提条件

このレッスンでは、練習を完了するために必要な Adobe ID と権限があることを前提としています。Adobe ID と権限がない場合は、Experience Cloud 管理者に連絡して、アクセスをリクエストする必要がある場合があります。

タグの場合、環境の開発、承認、Publish、拡張機能の管理および管理を行う権限が必要です。タグユーザー権限について詳しくは、ドキュメントを参照してください。
Adobe Analytics の場合は、このチュートリアルを完了させるために使用するトラッキングサーバーとレポートスイートについて把握しておく必要があります。
Audience Managerするには、Audience Managerサブドメイン（「パートナー名」、「パートナー ID」、「パートナーサブドメイン」とも呼ばれます）を把握している必要があります

また、HTML や JavaScript などのフロントエンド開発言語に精通していることを前提としています。レッスンを完了するために、これらの言語の専門家である必要はありませんが、コードを快適に読んで理解できれば、これらの言語からより多くを得ることができます。

タグについて

Adobe Experience Platformのタグ機能は、Adobeが提供する次世代型の web サイトタグおよび Mobile SDK の管理機能です。タグを使用すると、関連する顧客体験を強化するために必要なすべての分析、マーケティング、広告などのソリューションを、簡単にデプロイして管理できます。タグについては、追加料金はかかりません。 Adobe Experience Cloud のお客様は、Launch を利用できます。

Web サイト用タグを使用すると、デスクトップサイトやモバイルサイトで使用する分析、マーケティング、広告ソリューションに関連するすべてのJavaScriptを一元的に管理できます。例えば、Adobe Analyticsをデプロイすると、タグはAppMeasurement JavaScript ライブラリを管理し、変数を設定し、リクエストを実行します。

カスタムコードを含む、コンテナのコンテンツが縮小されます。すべてがモジュラー式です。項目が不要な場合は、ライブラリに含まれません。その結果、高速でコンパクトな実装になります。

また、タグは、サードパーティベンダーが拡張機能を作成して、タグを通じてソリューションを簡単にデプロイできるようにするプラットフォームでもあります。拡張機能は、タグインターフェイスとクライアント機能を拡張するコードのパッケージ（JavaScript、HTML、CSS）です。タグはオペレーティングシステム、拡張機能はタスクの遂行に使用されるアプリと考えることができます。

レッスンについて

このレッスンでは、Adobe Experience Cloud を練習用の小売 Web サイト「Luma」に実装します。Luma サイトには、現実的な実装を構築できる豊富なデータレイヤーと機能があります。独自のExperience CloudExperience Cloud Debuggerで独自のタグプロパティを作成し、組織を使用してホストされている Luma サイトにマッピングします。

ツールの取得

拡張機能にはブラウザー固有のものがあるため、Chrome Web ブラウザーを使用してチュートリアルを完了することをお勧めします。
Chrome ブラウザーに 🔗0} 拡張機能 } をAdobe Experience Platform Debuggerします

サンプルの HTML ページコードをコピーします

accordion

サンプルの HTML ページコード

code language-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/ja-JP/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>

サンプルの HTML ページを変更できるテキストエディターを取得します。（エディターがない場合は、Brackets を試すことをお勧めします）。
Luma サイトをブックマークします。

NOTE

このチュートリアルを読んで別のブラウザーでデータ収集インターフェイスの手順を完了する間に、Chromeで Luma サイトを開くと、このチュートリアルを完了しやすくなります。

それでは、始めましょう。

次へ「タグプロパティの作成」 >

recommendation-more-help

45774420-d03e-4a6b-94b5-cd639ae825b2