Correctly Creating a Data Element | Community
Skip to main content
R
robertw54618073
Level 2
January 25, 2021
Solved

Correctly Creating a Data Element

  • January 25, 2021
  • 1 reply
  • 3115 views

Hello,

On our websites product pages, visitors have the ability to view, download or share various types of resources/reading material.  Resource Types include Catalogs, Installation Documents, Part Drawings, etc.  What I'm trying to do is capture the Resource Typed that is clicked after a visitor clicks view, download or share.  (examples below)

 

I created a data element to capture the value for the resource type

I also created a rule which is structured as:  IF a visitor clicks on one of the three resource options (view, download, share).  THEN set an eVar to capture the text of the resource type.  

 

When I went to check this rule, I noticed that the data element being recorded was always the first resource type listed on that page.  So in the below example, "Catalog Cut Sheets" are listed first, but if I clicked on download a Catalog, the data element would see that as a Catalog Cut Sheet.  

 

I'm sure there's a way to capture the correct value based on how far down the page a visitor clicks; however I'm not familiar enough with page code/CSS Selectors to find this on my own.  

 

So my question... is there a way to record the resource type clicked on so that I don't keep capturing the first product listed on each product page?  

 

Example Product Page:  https://www.panduit.com/en/products/copper-systems/connectors/modular-plugs/mp588-c.html

 

 

| Resource Type |        | File Name |                  | View - Download - Share |

 

Any feedback would be appreciated!  

 

Thanks!

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Brian_Johnson_

@robertw54618073 -

Assuming you only need this data for this particular rule, I would probably go with a data element-free approach. Try the following:

  1. Set the selector for your click action in the rule to: tr.pdp-resource-row li.list-inline-item
  2. Remove the current eVar setting in your "set variables" action
  3. Add the following as custom code:

    var linkText = this.innerText;
    var resourceRow = this.closest("tr.pdp-resource-row");
    var resourceType = resourceRow.querySelector("td.resource-title").innerText;
    s.prop1 = resourceType + "|" + linkText.trim().replace(/\n/g, " ");
    s.linkTrackVars += ",prop1";

  4. Change the prop1 references to whatever eVar or prop you want to use
  5. Save and test your updates

In short, we're targeting the links and images for each document download/share/save. Any time one of them is clicked, we grab the link text, then traverse up the DOM to get the resource type. The strings are then scrubbed (remove excess spacing and line breaks) before being joined with a pipe (|) and assigned to the appropriate prop/eVar. Some sample values:

  • Installation Documents|DownloadPDF
  • Catalogs|DownloadPDF
  • Part Drawings|ViewDXF (1.79MB)

You could also easily add the resource description (title), force it all to lower case, or do further scrubbing should you want to clean the text up more. (For example, you may want to get rid of the file size information that is attached to the download links.)

1 reply

Brian_Johnson_
Brian_Johnson_Accepted solution
Level 8
January 26, 2021

@robertw54618073 -

Assuming you only need this data for this particular rule, I would probably go with a data element-free approach. Try the following:

  1. Set the selector for your click action in the rule to: tr.pdp-resource-row li.list-inline-item
  2. Remove the current eVar setting in your "set variables" action
  3. Add the following as custom code:

    var linkText = this.innerText;
    var resourceRow = this.closest("tr.pdp-resource-row");
    var resourceType = resourceRow.querySelector("td.resource-title").innerText;
    s.prop1 = resourceType + "|" + linkText.trim().replace(/\n/g, " ");
    s.linkTrackVars += ",prop1";

  4. Change the prop1 references to whatever eVar or prop you want to use
  5. Save and test your updates

In short, we're targeting the links and images for each document download/share/save. Any time one of them is clicked, we grab the link text, then traverse up the DOM to get the resource type. The strings are then scrubbed (remove excess spacing and line breaks) before being joined with a pipe (|) and assigned to the appropriate prop/eVar. Some sample values:

  • Installation Documents|DownloadPDF
  • Catalogs|DownloadPDF
  • Part Drawings|ViewDXF (1.79MB)

You could also easily add the resource description (title), force it all to lower case, or do further scrubbing should you want to clean the text up more. (For example, you may want to get rid of the file size information that is attached to the download links.)

R
robertw54618073Author
Level 2
January 26, 2021
@brian_johnson_ - Wow, small world! Well I definitely appreciate the help
Terms & ConditionsAccessibility statement

Loading footer...