DocumentationExperience PlatformWeb Tutorial

Switch tag environments with the Experience Cloud Debugger

Last update: Mon Nov 20 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Developer

In this lesson you will use the Adobe Experience Platform Debugger extension to replace the tag property hardcoded on the Luma demo site with your own property.

This technique is called environment switching and will be helpful later, when you work with tags on your own website. You will be able to load your production website in your browser, but with your development tag environment. This enables you to confidently make and validate tags changes independently from your regular code releases. After all, this separation of marketing tag releases from your regular code releases is one of the main reasons customers use tags in the first place!

NOTE
Adobe Experience Platform Launch is being integrated into Adobe Experience Platform as a suite of data collection technologies. Several terminology changes have rolled out in the interface which you should be aware of while using this content:

Learning Objectives

At the end of this lesson, you will be able to:

  • Use the Debugger to load an alternate tag environment
  • Use the Debugger to validate that you have loaded an alternate tag environment

Get the URL of your Development Environment

  1. In your tag property, open the Environments page

  2. In the Development row, click the Install icon Install icon to open the modal

  3. Click the Copy icon Copy icon to copy the embed code to your clipboard

  4. Click Close to close the modal

    Install icon

Replace the tag URL on the Luma Demo Site

  1. Open the Luma demo site in your Chrome browser

  2. Open the Experience Platform Debugger extension by clicking the Debugger Icon icon

    Click the Debugger icon

  3. Note that the currently implemented tag property is shown on the Summary tab

    tag environment shown in Debugger

  4. Go to the Tools tab

  5. Scroll to the section Replace Launch Embed Code

  6. Make sure the Chrome tab with the Luma site is in focus behind the Debugger (not the tab with this tutorial or the tab with the Data Collection interface). Paste the embed code that is in your clipboard into the input field

  7. Toggle on the “Apply across luma.enablementadobe.com” feature so that all pages on the Luma site will map to your tag property

  8. Click the Save button

    tag environment shown in Debugger

  9. Reload the Luma site and check the Summary tab of the Debugger. Under the Launch section, you should now see your Development Property is being used. Confirm that both the Name of the property matches yours and that the Environment says “development.”

    tag environment shown in Debugger

NOTE
The Debugger will save this configuration and replace the tag embed codes whenever you come back to the Luma site. It will not impact other sites you visit in other open tabs. To stop the Debugger from replacing the embed code, click the Remove button next to the embed code in the Tools tab of the Debugger.

As you continue the tutorial, you will use this technique of mapping the Luma site to your own tag property to validate your tag implementation. When you start using tags on your production website, you can use this same technique to validate changes.

Next “Add the Adobe Experience Platform Identity Service” >

recommendation-more-help
45774420-d03e-4a6b-94b5-cd639ae825b2