As a customer, it is possible that you are scrolling through a website page with your mobile phone. But on a mobile phone, the purchase decision will not be made. This could be due to several reasons, such as price or payment methods for example. In this case, as a company, I would like to be top of mind of this customer and would like to make this decision on a pc or laptop as easily as possible. Why should you not email the item a customer is looking for, so they can easily go to that product on their pc or laptop?
With Datatrics in combination with an ESP (in this case, Copernica, but this might be possible with different ESPs as well), you can create a touchpoint that is prefilled with all the necessary information. You only have to create a form in your ESP, create a touchpoint in Datatrics and show this touchpoint at several moments on your website. This document will explain the steps to take one by one.
Step 1: Creating the form
In Copernica (and probably other ESPs), it is possible to create a form, such as a newsletter subscription. Just in this case, you can just create a form with all the necessary information you need to create a follow-up email.
Step 2: Create a Datatrics template
With the Datatrics template builder, creating blocks filled with content you would like to show is easy. Here you only need a title block and an HTML block. Because you will create an HTML form in Copernica (or another ESP). This form can be copied in the HTML section.
Step 3: Make the form dynamic
Once you have created the form, you can add this to the template. In the HTML form, the input value of a form is empty by default, but you can prefill this with the use of Datatrics (see example code). You can use the following helper, for example, {{current.item.name}} In this case, the form is prefilled with the content item's name. You can do this with all the data you would send to Copernica in the form.
Important note: All the attributes should be available in the item in Datatrics. If not, the touchpoint won't be able to serve your audience. We advise testing this touchpoint for different product pages before launching.
Example code:
<form name="subscribe" method="post" action="https://publisher.copernica.com/">
<input type="hidden" name="px_process" value=".p.w.formgenerate.outputform" />
<input type="hidden" name="wizard" value="subscribe" />
<input type="hidden" name="next" value="" />
<input type="hidden" name="check" value="" />
<input type="hidden" name="cdmaccount" value="12345" />
<input type="hidden" name="database" value="" />
<input type="hidden" name="dbfields" value="" />
<table>
<tr>
<td>Email</td>
<td><input type="text" name="dbfield" /></td>
</tr>
<tr>
<td>image_Datatrics</td>
<td><input type="text" value="{{current_item.image}}" name="dbfield" /></td>
</tr>
<tr>
<td>Title_Datatrics</td>
<td><input type="text" value="{{current_item.name}}" name="dbfield" /></td>
</tr>
<tr>
<td>price_Datatrics</td>
<td><input type="text" value="{{current_item.price}}" name="dbfield" /></td>
</tr>
<tr>
<td>url_Datatrics</td>
<td><input type="text" value="{{current_item.url}}" name="dbfield" /></td>
</tr>
<tr>
<td>description_Datatrics</td>
<td><input type="text" value="{{current_item.description}}" name="dbfield" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Verzenden" /></td>
</tr>
</table>
</form>
After you add the code to the HTML block, this will be the output in the template.
If you check this template on a product page, you can see that the form is prefilled with data. In your notification, you don’t want to show this to your customers, so we will make this invisible later.
You can make those fields hidden in your HTML form. Because a field got a certain type, which can contain several types. In this case, you change the type from text to hidden.
<tr>
<td>price_Datatrics</td>
<td>
<input type="text" value="{{current_item.price}}"name="dbfield" />
</td>
</tr>
<tr>
Into
<tr>
<td>price_Datatrics</td>
<td>
<input type="hidden" value="{{current_item.price}}"name="dbfield" />
</td>
</tr>
<tr>
If you change all the fields to "hidden", you will see that the email field is the only visible one.
In this example, I did not add styling to the touchpoint, but with our template builder, it is possible to style the template. Also, adding a dynamic image on top could do the job, so a customer knows that this item will be sent to their email. You can do this by adding a dynamic image block and adding the helper {{current_item.image}}.
step 4: Create a follow-up email in Copernica (with Smarty)
Some information from Copernica:
Personalization in Copernica works through the scripting language Smarty. You can include any database or collection field in your templates, documents and texts, replacing it with the personal data of the reader or addressee.
The code is characterized by the use of curly braces, { and }, and the dollar sign, $.
Field names
Personalization based on relation data is done using the database and collection of field names from 'Profiles'. It only works if you copy the field name exactly in the code.
Smarty is case-sensitive. So {$name} is somewhat different from {$NAME}
it should be clear whether it is a profile or subprofile field.
Example: you have database fields with the names email and first name. In an email document, you use the following text:
Hello {$firstname}, you registered with the email address {$email}.
When the document is displayed personalized, you get the result:
Hello Jean-Jacques, you registered with the email address jean.jacques23@hotmail.com
(given that the addressee's name is Jean-Jacques and owns this email address).
step 5: create a touchpoint, set targeting and test
With the new touchpoint builder, it is just a matter of selecting the template you created. Then you have to select on which side of the screen you would like to add the touchpoint. Datatrics already provide you with positions which you can choose. Otherwise, you should create your own.
With content, you can select none and add some targeting or additional settings, which you prefer.
As mentioned before, you can target mobile only or show this touchpoint after a certain amount of scroll dept or seconds on a page.