Wrapping Up

What's Next?

Congrats on finishing the tutorial!

Hopefully, you've learned not only about the technical aspects of integrating with Dynamic Yield, but also about how the business users in your organization are interacting with it, often on a daily basis. A good working relationship with the business side would be crucial to a successful implementation and getting that uplift in business KPIs.

Since Dynamic Yield is as wide a platform as they come, we didn't really deep dive into anything during this training. Here are a few directions on where to go from here:

1. Go over the Implementation Checklist for an orderly view on how to fully integrate Dynamic Yield in your application (e.g. we didn't even bother with firing the purchase event).

2. Read up on some Best Practices for real-life usage.

3. Consider completing the bonus tasks below to learn a few more skills.

4. Ask yourself: How can I best collaborate with the business users? as a cool example, we've seen developers at one customer use Storybook to showcase the gallery of available personalization-enabled React components they've built.

Bonus Task 1: Add an Overlay (and Learn to Handle Nulls!)

Adding a popup overlay to the Petshop is very similar to a homepage banner, really, but with one important difference: while the homepage banner always shows one of the available variations (and there's even a fallback in code), an overlay should typically only appear if specific targeting conditions are met. Otherwise, nothing is shown.

In Dynamic Yield terminology, creating a campaign for an overlay involves one extra step: when editing the campaign, you should simply delete the default experience, leaving one or more targeted experiences. If none of the targeting conditions are met, the choose endpoint would return this response:

"choices": [
  // ...rest of campaigns...
  {
    "id": 311651,
    "name": "HP Overlays",
    "type": "DECISION",
    "variations": [],
    "decisionId": null
  },
  // ...
]

As you can see, the variations array is empty and decisionId is null. Make sure your code handles this case. In fact, it's recommended to always have your code able to deal with this response without breaking the page.

The Petshop app has some built-in support for overlays. A hard-coded version is already included in the before/ directory you've been working with, while the after/ directory already has the Dynamic Yield-enabled version implemented.

Check out the code in getPageContent(req): it will make an overlay appear if the page URL matches a certain hard-coded pattern, as can be seen in the screenshot above. Wiring this overlay to a Dynamic Yield campaign is now yours to do!

Of course, we wouldn't leave you without an alternative image for your overlay campaign. It's doggie madness!!!

Bonus Task 2: Support Previewing Variations

Wouldn't it be great if the business users in your organization (I mean the Petshop, of course) would be able to see how a variation looks like on site before they publish it to the world? actually, that's a pretty a basic need.

To support that, there's a very small piece of code to add. Head over to Previewing Content and read up on how to wire this capability in.