Implementing CANDDi Tags In Jekyll

What are Tags?

Before we dive into how to add tags to a site it’s worth quickly covering what tags are and how they can be used inside CANDDi. If you’re already familiar with tags feel free to skip this section.

Put simply, a tag is a way to know that a contact has done a specific action. Typically this means they have visited a specific page such as your about us page. For this example you would use our tags dashboard and would add a tag such as “about_us”. (Or as discussed below you can add this tag without using the tags dashboard). You also can use the same tag across many pages. For example you may wish to tag all your product pages with the tag “product” as well as the name of the individual product.

Having added a tag to a contact you can chose to create a stream based on contacts who have the selected tag(s). You will then see which contacts have looked at your page(s) with the selected tag(s). You may then also choose to add a trigger to the stream so you’re notified when a new person visits that page(s).

Internally we also use tags to power the identified visitors, prospects, enquired and excludes streams. (There’s also nothing stopping you adding these tags to your site if for example you wish to mark people who’ve visited your product pages as prospects).

More details on CANDDi tags can be found on our FAQ page.

Automatically adding tags using Jekyll

We’ve previously written about how our public facing website (the one you’re reading now) is written using jekyll. One of the things Jekyll allows us to do is add tags to pages. These tags can help manage content and allow users to find pages which are similar. They can also help jekyll to find related blog posts (if you’re using this feature). Using the code below you can use these same tags in CANDDi.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{%if page.tags %}
    <script type="text/javascript">
        window.canSet = {
            Settings : {
                TagsAdd : [
                    {% for tag in page.tags %}
                        {% if tag == page.tags.last %}
                            "{{ tag }}"
                        {% else %}
                            "{{ tag }}"
                        {% endif %}
                    {% endfor %}
                ]
            }
        };
    </script>
{% endif %}

For example on this page using the code above we generate the following code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
    window.canSet = {
        Settings : {
            
                TagsAdd : [
                    
                        
                            "jekyll"
                        
                    
                        
                            "development"
                        
                    
                ]
            
        }
    };
</script>

Adding this code just before the CANDDi tracking code already on your site means that CANDDi will automatically add the tags “jekyll” and “development” to this page inside CANDDi. When people then view this page they’ll automatically get tagged with these 2 tags and we can then create streams based on these tags to monitor who viewed this post.

Automatically removing tags

Like TagsAdd, there is a TagsRemove setting in CANDDi which allows you to remove tags from a page. The challenge is here is if you update your tags on a page, you’ll need a way to tell CANDDi they’ve gone. For this y ou might want to keep a list of old tags on your page using something like

1
oldtags : [blog_post]

You could then extend the above code to tell CANDDi to remove these tags from the page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    <script type="text/javascript">
        window.canSet = {
            Settings : {
                {% if page.tags %}
                    TagsAdd : [
                        {% for tag in page.tags %}
                            {% if tag == page.tags.last %}
                                "{{ tag }}"
                            {% else %}
                                "{{ tag }}"
                            {% endif %}
                        {% endfor %}
                    ]
                {% endif %}
                {% if page.oldTags %}
                    TagsRemove : [
                        {% for oldTag in page.oldTags %}
                            {% if oldTag == page.oldTags.last %}
                                "{{ oldTag }}"
                            {% else %}
                                "{{ oldTag }}"
                            {% endif %}
                        {% endfor %}
                    ]
                {% endif %}
            }
        };
    </script>

which would produce something like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
    window.canSet = {
        Settings : {
            
                TagsAdd : [
                    
                        
                            "jekyll"
                        
                    
                        
                            "development"
                        
                    
                ]
            
            
                TagsRemove : [
                    
                        
                            "blog_post"
                        
                    
                ]
            
        }
    };
</script>

By adding the above code to your jekyll site you can keep CANDDi up to date with your tags and manage your tags in one place rather than having to keep updating pages in the tags dashboard. The best place to add this code is in your footer just above the CANDDi tracker code.

It is important to not when removing tags that any new visitors will not get the original tags (only the contents of TagsAdd) but existing visitors will still have the old tags as CANDDi doesn’t automatically remove tags. You can however do this manually on individual contacts or using our bulk contacts feature.