Obtain a specific text value as a variable using Google Tag Manager

Question

Obtain a specific text value as a variable using Google Tag Manager

In my quest to extract the dynamic "sku" value from GTM, I am faced with a challenge. This particular value is unique for each product page.

Below is an example of how the code appears on the page:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "sku": "305FS-UJNA5",
  "offers": [{
        "@type": "Offer",
        "price": "99.00",
        "availability": "InStock",
        "priceCurrency": "USD"
        }]
}
</script>

The goal is to capture the variable: 305FS-UJNA5 (without quotes).

One approach I've considered is using a custom JavaScript variable in GTM that can search for "sku": " within the page and retrieve the value up to the next double quote.

If this method proves difficult, what alternative would you suggest?

My attempts at searching have so far yielded undefined results within GTM...

function () {
var content = document.body.innerText;
var query=""sku": "";
if (content.search(query) > -1 ) {
    return true;
} else {
    return false;
    }
}

javascript google-tag-manager

Answer 1

Answer №1

If you're open to considering a workaround solution

      <html>
        <head>
            <title></title>
                <script type="application/ld+json">
        {
          "@context": "http://schema.org",
          "@type": "Product",
          "sku": "305FS-UJNA5",
          "offers": [{
                "@type": "Offer",
                "price": "99.00",
                "availability": "InStock",
                "priceCurrency": "USD"
                }]
        }
        </script>
        </head>
        <body>
            <script>    
            json = {};
                scripts = document.getElementsByTagName('script');
                for (i = 0; i < scripts.length; ++i) {
                  script = scripts[i];
                  if(script.getAttribute('type') != "application/ld+json") {
                      continue;
                  }
                  json = JSON.parse(script.childNodes[0].nodeValue);
                  datalayer.push({ // dl must be initialized before
                    'event':'skuCapture',
                     'sku': json.sku
                  });
                }


            </script>
        </body>
        </html>

This will store the script-Tag content in a variable named "json," allowing you to access and manipulate it globally or push specific properties to the datalayer (e.g., json.sku holds the sku in this example). If you execute this outside of an existing event (like Dom Ready), you may need to trigger a custom event to inform GTM about the value.

If you can't modify the page code, you could embed this script inside a custom HTML tag as long as it runs after your initial script tag has loaded. This is just a functional demonstration.

I've tested this in Chrome, but its compatibility with other browsers and potential side effects remain unverified, so further testing and refinement may be necessary. Despite its slightly messy appearance, it's achievable.

A more concise version could look like:

var scripts = document.querySelectorAll("[type='application/ld+json']");
    for (i = 0; i < scripts.length; ++i) {
      script = scripts[i];
      json = JSON.parse(script.childNodes[0].nodeValue);
      console.log(json.sku);
    }

This code targets only script tags with the correct type attribute. If you know there is only one script tag, consider using document.querySelector instead of document.querySelectorAll to avoid looping through results.

Answer 2

If you're open to considering a workaround solution

      <html>
        <head>
            <title></title>
                <script type="application/ld+json">
        {
          "@context": "http://schema.org",
          "@type": "Product",
          "sku": "305FS-UJNA5",
          "offers": [{
                "@type": "Offer",
                "price": "99.00",
                "availability": "InStock",
                "priceCurrency": "USD"
                }]
        }
        </script>
        </head>
        <body>
            <script>    
            json = {};
                scripts = document.getElementsByTagName('script');
                for (i = 0; i < scripts.length; ++i) {
                  script = scripts[i];
                  if(script.getAttribute('type') != "application/ld+json") {
                      continue;
                  }
                  json = JSON.parse(script.childNodes[0].nodeValue);
                  datalayer.push({ // dl must be initialized before
                    'event':'skuCapture',
                     'sku': json.sku
                  });
                }


            </script>
        </body>
        </html>

This will store the script-Tag content in a variable named "json," allowing you to access and manipulate it globally or push specific properties to the datalayer (e.g., json.sku holds the sku in this example). If you execute this outside of an existing event (like Dom Ready), you may need to trigger a custom event to inform GTM about the value.

If you can't modify the page code, you could embed this script inside a custom HTML tag as long as it runs after your initial script tag has loaded. This is just a functional demonstration.

I've tested this in Chrome, but its compatibility with other browsers and potential side effects remain unverified, so further testing and refinement may be necessary. Despite its slightly messy appearance, it's achievable.

A more concise version could look like:

var scripts = document.querySelectorAll("[type='application/ld+json']");
    for (i = 0; i < scripts.length; ++i) {
      script = scripts[i];
      json = JSON.parse(script.childNodes[0].nodeValue);
      console.log(json.sku);
    }

This code targets only script tags with the correct type attribute. If you know there is only one script tag, consider using document.querySelector instead of document.querySelectorAll to avoid looping through results.

Obtain a specific text value as a variable using Google Tag Manager

Answer №1

Similar questions

Error in refreshing JWPlayer page: Plugin loading failure - File not located

The issue where all buttons in a list are displaying the same ID

Connect the attributes of one object to the properties of another object

Coordinates of HTML elements corners after rotation

The issue of nested tabs in Bootstrap 3 causing problems with sliders within the main tab has

Prevent pinch zoom in webkit (or electron)

Wavy CSS Animation

Building a table using a JSON object in a React component

How can I utilize Axios in Vue.js to access a local JSON file?

Tips for marking a textarea as mandatory when a choice is made

JQuery does not allow for changing the selection of a RadioButtonFor

Unable to find the module... designated for one of my packages

The class name is not defined for a certain child element in the icon creation function

Replicate and $(document).ready()

Refresh cloned element after making changes to the original element

Ways to manually trigger a reevaluation of Vuelidate validation

The current status of an ASP.Net Mvc Ajax request

How to maintain row highlight in jQuery datatable even after it is reloaded

Prevent certain dates from being selected in a designated input field

Learn how to cycle through three different texts that appear in the same spot using smooth transitions