javascriptweb-scrapinggoogle-analyticsgetelementsbyclassname

Get page text using javascript for Google Analytics custom variable

I want my javascriptcode to capture the text "Personenverzorging" and "Gespecialiseerde voetverzorging" for use within my Google Analytics custom Variables.

This text changes on every page so javascript cannot search on the exact term but it should know where to look within the HTML tags. 

  <div class="views-field views-field-name">
  <span class="field-content"><a href="/opleidingen?f%5B0%5D=field_taxonomy_sector%3A23">Personenverzorging</a></span>
  </div>  

  <div class="views-field views-field-name-2">
  <span class="field-content"><a href="/opleidingen?f%5B0%5D=field_taxonomy_sector%3A84">Gespecialiseerde voetverzorging</a></span>
  </div>

This is the Google Analytics code I am going to implement in my website using Google Tagmanager.

_gaq.push(['_setCustomVar',
          2,                   // This custom var is set to slot #2.  Required parameter.
          'Sub-Section',       // The 2nd-level name for your online content categories.  Required parameter.
          'Fashion',           // Sets the value of "Sub-section" to "Fashion" for this particular article.  Required parameter.
          3                    // Sets the scope to page-level.  Optional parameter.
         ]);

Sub-section should be replaced by "Personenverzorging" and Fashion by "gespecialiseerde voetverzorging".

This is the code that I have. But it does not work. Can somebody steer me to the right direction?

Can I use a wildcard since the only unique classes within the page are views-field-name?

var elements = document.getElementsByClassName("views-field-name-*");

var string;
string = "'_setCustomVar',1"

for (var i = 0; i < elements.length; i++) {    
    string = string + ","+ elements[1].innerText;
    string = elements[1].innerText;
    document.write(elements[1].innerText);
}

Thanks a lot! I appreciate your help.

Solution

  • If you are using Google Tag Manager, I would use the dataLayer to pass page elements using dataLayer variables. It's going to be much more consistent from page-to-page. It's sort what Google Tag Manager is built to do.

    For the example, I'll use 'Sub-section' and 'Fashion' as I do not understand Dutch or the hierarchy of your site, but this should be enough to get you started.

    1) Create two new dataLayer variables marcros: one for Sub-section and one for sub-sub-section.

    Call them something like subSection and subSubSection, and be sure that they are Version 1 of the dataLayer.

    enter image description here

    2) Add the dataLayer object to your website. It should look something like this:

    <head>

dataLayer = [{
  'subSection': 'Personenverzorging',
  'subSubSection': 'gespecialiseerde voetverzorging'
}];

</head>
<body>
GTM CONTAINER CODE
</body>

    3) Now, propagate the values you want for both 'subSection' and 'subSubSection' using your CMS's global variables. This should happen server-side. So when the page loads, the values will be in there.

    4) Once you see that values coming through (you can either look at the source code of the page or type dataLayer in the dev console to inspect the object), you're ready to setup the custom variable.

    From what it sounds like, you'll want the CV to trigger on every page. So go back into GTM, and go to your Google Analytics pageview track type, and go to More Settings > Custom Variables > New Custom Variables.

    Create your new custom variables, there should be two: one for subSection and one for subSubSection. Pick your slot (1-5), add your name like Sub Section, and then for the value, click the building-block and select the {{subSection}} macro, and then set scope. Publish container, and view data in GA.