Welcome to the final step of our blog series on Implementing Adobe Target with Adobe Experience Platform Web SDK. In Part 2, we explored the Tag Configuration, providing you with the knowledge to optimize your Adobe Target implementation. Now, in Part 3, we’ll explore Application Setup — the crucial phase where Adobe Target and Adobe Experience Platform merge to create exceptional user experiences. Let’s dive in and take your implementation to the next level!
You must need:
· Complete all steps for the initial configuration of the Platform Web SDK, including setting up data elements and rules.
· Ensure you have an Editor or Approver role.
· Install the Visual Experience Composer helper extension if you are using the Google Chrome browser.
· Know how to set up activities in Target.
Setting up Adobe Target with the Platform Web SDK can be done in two primary ways:
1. Asynchronous Implementation
2. synchronous Implementation uses the Luma site which has an asynchronous implementation of tags and flicker mitigation in place
We uses the Luma site which has an asynchronous implementation of tags and flicker mitigation in place. More detail https://experienceleague.adobe.com/docs/platform-learn/implement-web-sdk/applications-setup/setup-target.html?lang=en#
Configure the DataStream
Target must be enabled in the DataStream configuration before any Target activities can be delivered by Platform Web SDK.
To configure Target in the data stream:
1. Go to the Data Collection interface
2. On the left navigation, select Data streams
3. Select the previously created Luma Web SDK data stream
4. Select Add Service
5. Select Adobe Target as the Service
6. Enter the optional details about your Target implementation, if desired, following the guidance below.
7. Select Save
Property token
To set up or find property tokens, navigate to Adobe Target > Administration > Properties. The </> icon displays the implementation code. The at-property value is the property token you would use in your data stream.
Target environment ID
Environments in Target help you manage your implementation through all stages of development.
To set up or find Environment IDs, navigate to Adobe Target > Administration > Environments.
Target third-party ID namespace
This optional setting allows you to specify which Identity Symbol to use for the Target Third Party ID.
The Identity Symbols are found in the identities list under Data Collection > Customer > Identities.
Update the page load rule
When Target is enabled in the DataStream configuration, the Platform Web SDK is responsible for delivering visual personalization decisions. However, these decisions are not automatically rendered on the page. To enable automatic rendering, you need to make modifications to the global page load rule.
- In the Data Collection interface, open the tag property you are using for this tutorial
2. Open the all pages - library load - AA & AT rule
3. Select the Adobe Experience Platform Web SDK - Send event action
4. Enable Render visual personalization decisions with the checkbox
5. Save your changes then build to your library
Enabling the “render visual personalization decisions” setting in the Platform Web SDK allows Target’s personalized modifications to be automatically applied on the web page.
Set up a Target activity with the Visual Experience Composer
Now that the basic implementation portion is complete, create an Experience Targeting (XT) activity in Target to validate that everything is working correctly.
1. Navigate to Target
2. Create an Experience Targeting (XT) activity using the Luma homepage for the activity URL
3. Modify the page, for example, change the text on the homepage banner
4. Choose Adobe Analytics as the reporting source with the appropriate report suite and the Orders metric as the goal
5. Save the activity
6. If you are comfortable with your changes, then you can activate your activity. Otherwise, if you would like to preview the experience without activating you can copy the QA Preview URL.
7. Load the Luma homepage and you should see your changes applied
8. After a few hours, you should be able to see Target activity data and conversions in Adobe Analytics
Validate with the Debugger
Once you have set up an activity, you can verify if Target is configured correctly by checking the Send Event network call. Even if no activities are currently live, examining the Send Event call can confirm the proper configuration of Target.
1. Open the Adobe Experience Platform debugger browser extension
2. Go to the Luma demo site and use the debugger to switch the tag property on the site to your own development property
3. Reload the page
4. Select the Network tool in the debugger
5. Filter by Adobe Experience Platform Web SDK
6. Select the value in the event’s row for the first call
7. Notice that there are keys under query > personalization and decisionScopes has a value of __view__. This scope is equivalent to Target’s “global mbox”. This Platform Web SDK call requested decisions from Target.
8 Close the overlay and select the event details for the second network call. This call is only present if Target returned an activity.
9 Close the overlay and select the event details for the second network call. This call is only present if Target returned an activity.
Add a scope to the page load rule
Modify your page load rule to add a custom decision scope:
1 Open the all pages — library load — AA & AT rule
2 Select the Adobe Experience Platform Web SDK — Send Event action
3 Add one or more scopes you would like to use. For this example, use homepage-hero
4 Save your changes and build to your library
Process the response from Target
After configuring the Platform Web SDK to request content for the homepage-hero scope, you need to handle the response appropriately. To accomplish this, the Platform Web SDK tag extension offers a Send Event Complete event that can be utilized to trigger a new rule immediately upon receiving a response from a Send Event action.
1 create a rule called homepage — send event completely — render homepage-hero.
2 Add an event to the rule. Use the Adobe Experience Platform Web SDK extension and the Send event complete event type.
3 Add a condition to restrict the rule to the Luma homepage (path without query string equals /content/luma/us/en.html).
4 Add an action to the rule. Use the Core extension and Custom Code action type.
5 Enter custom code to read and act on the propositions returned from the Platform Web SDK response. The custom code in this example uses the approach outlined in the guide for manually rendering personalized content. The code was adapted for the homepage-hero example scope using a tag rule action.
For Code image refer this link : https://experienceleague.adobe.com/docs/platform-learn/implement-web-sdk/applications-setup/setup-target.html?lang=en#
6 Save your changes and build to your library
7 Load the Luma homepage a few times, which should be enough to make the new homepage-hero decision scope register in the Target interface.
Set up a Target activity with the Form-based Experience Composer
Now that you have set up a rule to manually render a custom decision scope, you can proceed to create another Experience Targeting (XT) activity in Target. For this activity, you will utilize the Form-Based Experience Composer, which allows you to design personalized experiences using form inputs.
1 Open Adobe Target
2 Deactivate the activity used for the previous lesson
3 Create an Experience Targeting (XT) activity using the Form-based Experience Composer option
4 Select the homepage-hero location from the location dropdown and Create HTML Offer from the content dropdown. If the location is not available, you can type it in. Target periodically populates new location names after receiving requests for that location or scope
5 Paste the following code in the content box. This code is a basic hero banner with a different background image
For Code image refer this link : https://experienceleague.adobe.com/docs/platform-learn/implement-web-sdk/applications-setup/setup-target.html?lang=en#
6 On the Goals & Settings step, choose Adobe Target as the reporting source and Engagement > Page Views as the goal
7 Save the activity
8 if you are comfortable with your changes, then you can activate your activity. Otherwise, if you would like to preview the experience without activating you can copy the QA Preview URL.
9 Load the Luma homepage and you should see your changes applied
Validate with the Debugger
Follow the same debugger steps that were used in the previous VEC implementation.
Congratulations on completing our blog series on Implementing Adobe Target with Adobe Experience Platform Web SDK. We’ve explored the Initial Configuration, Tag Configuration, and Application Setup, allowing you to seamlessly integrate Adobe Target into your web application. Thank you for joining us on this insightful adventure…
We value your feedback, so please share your thoughts and suggestions with us to help us improve and provide more valuable content.
Once again, thank you for being a part of our community. Stay tuned for more informative content, and we look forward to connecting with you soon.
Comments
Post a Comment