Connectif can respond to clicks on any link on your website, whether or not it is part of the platform’s content. This feature enables link tracking, provides more accurate segmentation and facilitates the creation of much more personalized campaigns, and more.
In this article, you'll learn how to detect and respond to web links created outside Connectif
Implementation time: 20 minutes.
Difficulty: Medium.
When to use it: When you need Connectif to respond to any link on your website.
One very useful idea for implementing this step-by-step guide is to detect and respond to the links of social media share buttons, so you can segment the contacts according to their preferred social network.
STEP 1. Detects clicks on links
(This section explains how to add attributes to links that allow their detection in Connectif).
1. In your back office, head to the template settings with the product pages.
2. Open the code editor.
3. Look for the HTML tags of one of the links you want to gather.
In our case, the label for Facebook has been selected. The code to be detected will be similar to the one indicated below.
<a href="http://www.facebook.com/sharer.php?u=http://mitienda.com/index.php?id_product=1&rewrite=hummingbird-printed-t-shirt&controller=product&id_lang=1" class="text-hide" title="Share" target="_blank">Share</a>
4. In each tag, add the attribute "data-cn-track-click".
The attribute "data-cn-track-click" is responsible for instructing Connectif to record the click on the link.
The example Facebook tag would be shown in the following block of code. The added attribute is at the end.
<a href="http://www.facebook.com/sharer.php?u=http://mitienda.com/index.php?id_product=1&rewrite=hummingbird-printed-t-shirt&controller=product&id_lang=1" class="text-hide" title="Share" target="_blank" data-cn-track-click>Share</a>
5. Add the "data-cn-alias" attribute to the link tag.
The attribute "data-cn-alias" is responsible for assigning a name to each link that allows it to be recognized in the workflow. Use a different alias to identify each link to be detected.
The example Facebook tag would be shown in the following block of code. The added attribute is at the end and has been assigned as an alias to recognize the word "Facebook".
<a href="http://www.facebook.com/sharer.php?u=http://prestashop-93073-1289703.cloudwaysapps.com/index.php?id_product=1&rewrite=hummingbird-printed-t-shirt&controller=product&id_lang=1" class="text-hide" title="Share" target="_blank" data-cn-track-click data-cn-alias="Facebook">Share</a>
6. Repeat steps 3, 4, and 5 with each link you want to detect clicks for.
7. Save the changes in the code editor of your back office.
STEP 2. Create the custom fields
(This section explains how to store in the contact's profile the information related to their interaction with the link).
8. Go to "Contacts > Contact fields" and click Add new custom field.
9. Name the new custom field and assign it the appropriate type.
10. (Optional) If necessary, you can change the field icon and assign it a default value or a maximum length.
If you want to learn more about custom fields, click here.
11. Click Save.
12. Repeat the previous points, from 8 to 11, for each of the data you want to collect or establish when you detect a click on the link.
In our example, two text-type custom fields have been created. One to remember which product the contact has recommended and the other the social network where it was shared.
STEP 3. Create dynamic segments
(This section explains how to automatically create the structure to segment contacts in Connectif, according to the clicks detected).
13. Go to "Contacts > Segments" and click Create new segment.
14. Select the Dynamic segment type and click Go to segment editor.
15. Assign a name to identify the segment.
16. (Optional) Write a description if it helps you clarify the basis for these contacts to be segmented.
17. Set the segment condition or conditions for contacts to be considered.
In our example, the segmentation condition depends on the value of the contact's "Social media used" custom field. To segment the contacts who share on Facebook, "Facebook" is indicated as the value to be met.
18. Click Create.
19. Repeat points 13 to 18 for each necessary segment, one for each link you want to detect and respond to.
In our example, four dynamic segments have been created, one for each social network.
If you want to learn more about dynamic segments, click here.
STEP 4. Create the workflow
(This section explains how to create the strategy that detects and responds to web links using the elements created in the previous steps).
20. Go to “Workflows” and click Create new workflow.
21. Design your strategy by establishing the behavior of the platform after detecting a click on the links in question
A workflow with the aim of detecting and responding to external web links needs at least one "On Web Content Click" node.
In our example, a workflow has been created that detects social sharing links on product pages. It responds by saving the contact's information in their profile and, through this new data, Connectif segments the user automatically.
4.1. "Start" node
22. Click (Edit node settings) in the "Start" node.
23. Set the target audience for the workflow.
In our example, all contacts are taken into consideration, both new and existing.
24. Click Update.
4.2. "On Product Visited" node
25. Under the "On Product Visited", click (Edit node settings).
If necessary, you can use any additional trigger type node before the "On Web Content Click", node, to limit where clicks to external links are detected. If you want to learn more about trigger nodes, click here.
26. Configure the node and its limitations according to the design of your strategy.
In our example, no filters have been added in the settings and all limitations have been removed: the goal is to detect the click on links on all products and in all visits.
27. Click Update.
4.3. "On Web Content Click" node
28. Under the "On Web Content Click", click (Edit node settings).
29. In the Configuration tab, select the filter type "On click on some of the following manually specified links".
30. Check the Link alias option and enter one of the aliases defined in STEP 1.
In our example, the alias attribute was defined as "data-cn-alias="Facebook", so you would type "Facebook" in the text box.
31. Review and configure node limitations if necessary.
In our example, all limitations have been removed: the goal is to update all the information if the contact clicks on a social media share button again.
If you want to learn more about the "On Web Content Click", click here.
32. Click Update.
4.4. Nodo "Set Attribute"
(In this section we explain how to save the contact’s details after they click an aliased link).
33. In the "Set Attribute" node, click (Edit node settings).
34. Assign the data imported into the workflow that corresponds to the custom fields created in STEP 2.
In our example, the name of the product, which comes from the "On Product Visited" node, has been assigned to the "Shared product" custom field.
In the case of the "Social media used" custom field, the value has been established based on the link alias, which is data collected by the "On Web Content Click" node.
If you want to learn more about the "Set Attribute", node, click here.
35. Click on Update.
36. In the workflow, click Save to save your changes and Start to activate it.
Success!
The settings for detecting and responding to the chosen external web links are now ready.
Do you have questions?
Don’t forget, our Connectif specialists are here to help you. To contact them, just open a Support ticket by clicking the blue “Help” button on your dashboard.
Keep learning!
To make the most of your Connectif account, we recommend reading these articles next:
- Custom integration for receiving data, to collect data in Connectif from external systems or applications.
- Custom integration for sending data, to send data from Connectif to external systems or applications.
-
Integration with Facebook and Instagram, to manage the audiences of your Facebook Ads account using Connectif.
-
Integrated forms, to detect and gather existing forms on your website in Connectif.