概要

最終更新日： 2026年10月17日

トピック：
Tags

作成対象：

Beginner
Intermediate
Developer

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

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

WARNING

このチュートリアルとそのLuma web サイトの演習は、古いJavaScript ライブラリに依存して管理されなくなりました。現在のベストプラクティスを学ぶには、Adobe Experience CloudとWeb SDKの実装チュートリアルを使用してください。

これを完了すると、次のことができるようになります。

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

NOTE

同様のマルチソリューションチュートリアルは、Web SDKおよびモバイルSDKでも利用できます。

前提条件

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

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

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

タグについて

Adobe Experience Platformのタグ機能は、Adobeが提供する次世代のweb サイトタグおよびモバイルSDK管理機能です。タグを使用すれば、適切な顧客体験を実現するために必要なあらゆる分析、マーケティング、広告ソリューションを容易に展開および管理できます。タグに追加料金はかかりません。 Adobe Experience Cloud のお客様は、Launch を利用できます。

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

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

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

レッスンについて

WARNING

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

ツールの取得

拡張機能にはブラウザー固有のものがあるため、Chrome Web ブラウザーを使用してチュートリアルを完了することをお勧めします。
Chrome ブラウザーに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

platform-learn-help-tutorial-website-implementation