Even though notifications are a great tool, you may not always want to have things move on your screen. Sometimes you want to embed content into your website to make them look like they are a part of the website. For this we have embedded content touchpoints.
To start setting one up, select Website - Embedded content.
Displayed above is a screenshot of the website before any changes
Note: After selecting your content it is important you set up your CSS selector. If you are unclear as to how this works, please check out this article.
After your CSS selection has been completed, we can dive into the editor.
You will generally want this embedded content to match the content on your website. To make this easy on yourself (unless you really love coding) you can copy the properties of existing content on your website.
You can do this by following these steps:
Right click on the element you want to use as a styling template
Click Inspect
3. Right click on the element you want to use
4. Copy - Copy outer HTML
5. Finally paste this into the HTML tab of the editor (Appearance - Editor). If you want to make your code look a bit cleaner without any work, we recommend you check out this online tool.
If you selected multiple html elements (like we did in the picture shown above) then you will have a list of html elements displayed in your code editor. Make sure to delete all of them but 1. The reason for this is that we want to use this single element to dynamically generate as many elements as required. In our example each element is defined with "<article></article>".
Your code should now look something like this. We have cleaned it up using the previously mentioned tool and changed "popular items" to "recommended for you". This is highlighted with the red arrow.
If we now look at the website, this is what appears:
As you can see we are showing the text "Recommended for you" as well as the content item we took the outerHTML from.
Looking back at the original website however, we can see that they use rows of 4 items. We are currently only showing one. Fortunately we have a cheatsheet which contains a way to solve this problem. You can find it here. To solve our problem we will be using "#each":
{{#each items}} itemcount='4'
<!-- YOUR HTML -->
{{/each}}Note: Adding "#each" is only required if you want to display more than one item. You can skip this section if you do not want to add this.
Adding that piece of code to our html makes it look like this:
The first red arrow tells the system where the each section should start and the second where it should end. Do make sure you only include the things you actually want to be repeating in the each section. If we put the "recommended for you" part in there, we will also repeat that 4 times.
It now looks like this on the website:
As you can see we are now properly displaying 4 items in a row, just like the original.
But wait.. they are all the same and not personalized.
This problem arises because we simply copied an existing item's HTML and repeat that 4 times. We need to make the code dynamic to allow Datatrics to fill in the content that fits best given your recommendation strategy.
So, how do we do this? Well, we need to go into the code and remove any static values. We replace these static values with item attributes so that it can dynamically load these. Because we are using #each, we can simply use {{attribute}} instead of {{item.attribute}}. Read more about this in our dedicated article: https://help.datatrics.com/en/articles/3452598-the-attribute-system
As you can see in the screenshot we have changed the required values to the corresponding attribute variables, like {{name}}, {{price}}, {{image}} and {{url}}.
This has the following result on the website:
These are some of the things that changed:
The items all have their correct names
The images match with the names
The associated prices are visible
They now link to the correct product page (not visible on this page)
Obviously there are many different ways to set up a piece of embedded content and this is just one way. Because this is a pretty long process, we will summarize the steps once more:
Choose embedded content type
Select your content
Select your embedded content position (CSS selector)
Add outerHTML from existing content or type your own HTML
Optional: Add an #each loop to display multiple items
Make content dynamic by adding attributes
Audience targeting
After setting up an embedded touchpoint, it is very important to specify where it should be shown. If no audience targeting is in place, the touchpoint will try to add the embedded content touchpoint on every single page. This can lead to two situations:
The touchpoint is being shown on a page where you don't want it to be shown. This can happen because the CSS selector on that page is identical to the CSS selector on the page where you wanted to implement it. This can cause touchpoints to be shown on incorrect pages.
When you have many touchpoints without specifying where they should be shown, they will all start looking for their respective CSS selector the moment a page loads. This can cause slowdowns on your website. So while only 1 touchpoint might be shown, 6 others can be scouting the page looking for their CSS selector.