How to track E-commerce website Filters clicks

[jingze0619]

To whom it may concern,

We are a E-commerce website. We currently want to track the filter clicks. For example: if a customer click size 14.5 and color white, etc. 

Picture 1 is all the filters we have for one category (dress shirts tab)

Picture 2 after expanding, for example size and color filters, what customers can click 

Picture 3 is all the filters we have for another category (pants tab)

Note: different categories will have different filter information

So, I am wonder how can I build this configuration in CI360 to track those clicks?

Not sure below html information helpful or not, it's for category: pants. 

And here is our website: https://www.paulfredrick.comWe have 11 tabs: Dress shirts, Ties, Suits, Sport Coats, Pants, etc. 

Is one configuration (such as custom click event) can track all those information all together for different categories page? Or it need to be configured separately for different categories? Or do we need to create JavaScript API and build this configuration? 

If anyone know anything about this question. Please let me know. 

Thank you so much 

Jingze 

[JeffPS]

Hi Jingze,

There a few a options you can manage when I did take a look at your site.

1. Click Tracking - This could pull the data from the clicked items. Using the selectorPath identification you could use div#refine-group > ul > li > a for the selector path. That should only gather clicks from the filter areas. It would be a good idea to create different click rules for each category of clothes to make it easier to parse the data later.

There could be issues related to pulling the correct data but the HTML does specify an HTML5 attribute (which can be chosen in the click custom event custom attribute section). The label is aria-label which would return things like "size 15-33 17 Products". This attribute is generally used for assistive technologies and should be relatively stable.

2. URL parsing - currently if you have a page load rule, you could parse the URL to see what is currently being selected. This has the added benefit that if you already have setup everything, you could go back and pull the data. For example:Your URL is https://www.paulfredrick.com/shop/dress-shirts/color=grey%5Egreen/size=15-32%5E15-31%5E14,5-33/colla... and you've created page load rule for dress shirts. You could then parse it to pull out that you have color: grey, green ; size: 15-32,15-31,14,5-33 Etc.selected. Each page load would give you more or less items, and this allows for a more robust picture of what users are interested in. You could also combine this with a product view and then use the previous page view with the filters to then track the user journey more easily as well. Setting up a new rule for each category (pants, shirts, etc.) would make it easier for data processing later but not a requirement!

3. JS API. This would require additional dev work, but it could be done. You would have to direct developers to add in click events to send data back to ci360. The config would be a bit more specific and in depth than I can go into here but more customization for data sent to ci360 in the end.

4. It might be possible with a good amount of work to pull all the filtered values from the page itself. I think the hardest part of this would be that some of the filtered values are defined in div that aren't very unique or don't have unique values so this might be a bit harder to manage without a bit of change to the html generated. It would be possible if all <a> values were returned, but I would need to test it and likely would return many values that you're not interested in.

Out of all these options, click tracking would be the easiest to implement. But there are some downsides including the tracking of deselect clicks within the filter areas.

URL has the benefit of older data if that matters to you but requires you to parse the data outside of ci360 which may not be viable. This one would already be setup from a data collection viewpoint as well.

If you have any questions let me know! Happy to help or clarify anything.

Cheers,

Jeffrey Stroud

[jingze0619]

Hi. Jeffrey

Thank you so much for all your answers. I have several questions regarding the first two options.

Option 1 

1. For the click tracking, is it under custom events > click > click attributes? Because currently our CI360 has some problems, and I just send a ticket to tech support. Not sure I am on the right path to create this event or not. 

2. You mentioned "It would be a good idea to create different click rules for each category of clothes to make it easier to parse the data later."  I am not a HTML person, so when you refer to create different click rules for each category, what's you mean specifically? Is there anything we need to change for different categories under the configuration you just showed?  Do you mind to provide two examples for different categories to show the difference under the configuration? 

Option 2 

3. You mentioned "Setting up a new rule for each category (pants, shirts, etc.) would make it easier for data processing later but not a requirement!" Does this one same as the one you mention in option 1? 

4."You could also combine this with a product view and then use the previous page view with the filters to then track the user journey more easily as well." Do you mind to explain here more? I am a little confused how it works here. 

Thank you again

Jingze 

[JeffPS]

Hi Jingze,

Option 1:

1. Yes that's the correct path to create a click event!  I'm not sure what your current setup is right now but I do see the tag on your site, I'll leave it to customer support to help you out there. There are many reasons why the website won't show up in the window you have below and many are security related. You can many times skip this window by clicking on the circles above (circle 5) and specify fake attributes values. This will let you bypass the "simple setup" menus and let you see the actual configuration.

2. When creating the rules I would create seperate rules for each clothing category. When defining in the configuration for rules you can specify certain webpages or a collection of webpages. So in the configuration for dress shirts you would set https://www.paulfredrick.com/shop/dress-shirts using contains function or something to only fire on dress shirt pages URLs. This can be done afterwards but it's probably just easier to do it in the config. If you do have a dataLayer of some sort, that could also be used to fire only on shirt pages and can many times be easier!

Option 2:

3. Yes this would be similar to the above. Allowing you to seperate the data easier by using the attribute settings within the configuration to group certain page view rules. It's not necessary if you do want to parse the data outside of the configuration but could make it easier.

4.This has to do with how you end up looking at the data. You could setup product views for when someone goes to a page with a product on your site. Looking at timestamps and such you could create a timeline and previous data to then say "they looked at these filters before and ended up at this product" There's not anything specific, it's more about how you use the session data to look at paths through your website but having a full understanding of the filters someone used before they went to a product view could be beneficial!

Best,

Jeff

[jingze0619]

Hi. Jeff 

I think I figure out the SelectorPath should be this one (please correct me if I am wrong) 

I have one last question. This click event is only for Dress Shirt page (as under event configuration, I selected dress-shirt page). I read the documentation for Event Attributes step, but I was a little confused. Do I need to change anything here? What would you recommend me to put for Custom Name and Custom Group Name? 

 

Looking forward to hear from you
Thank you. 

[JeffPS]

Hi Jingze!

Apologies on the lateness of my reply.

There are a few options for the Custom Name and Custom Groups.

These allow you if you have multiple rules to easily filter the data when you download it. There will be two columns in the data that you can use to categorize your data.

One of the nicer things is that you can use a dynamic name, by adding in an attribute like the page or a section of the URL. So for example, you could have the data show

CustomName filter:<click value>

Custom Group Name filterclick:<url 2nd level>

Which if your customer clicked on the 15 size shirt filter would give you: 

Custom Name filter:15

filterclick:dressshirt

Below is pictures of the config for the above.

Cheers,

Jeffrey

[jingze0619]

Hi. Jeffrey 

Above are the configuration I crated last week. However, I didn't track anything, I didn't find any data in the custom_events table. Is it because the event attributes (Custom Name, and Custom Group Name) or anything else?

I just create a new configuration and change the event attributes as your example, is there anything I need to change?

Why the custom group name only pick path 2? https://www.paulfredrick.com/shop/dress-shirts/color=white/size=14,5 if customer click color and size, only path 2 is not enough right to track both size and color, right? 

   

Looking forward to hear from you

Thank you 

Jingze 

[freyafrigohre]

When it comes to tracking filter clicks on an E-commerce website, there are a few options you can consider. One approach is using click tracking, where you can pull data from the clicked items. For example, you can use a selectorPath identification like ""div#refine-group > ul> li > a"" to specifically gather clicks from the filter areas. Creating different click rules for each category of clothes can make it easier to analyze the data later.