Need Help with Dynamically Changing Product Page Heading based on UTM Parameter

[SureBuy]

Hi Shopify Community,

I hope you are all doing well! I'm facing an issue with dynamically updating the heading on my product page based on a UTM parameter in the URL. I've implemented the following JavaScript code, but it's causing the heading to be duplicated:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Function to get UTM parameter from URL
  function getUTMParameter(name) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(name);
  }

  // Get the 'utm_content' parameter from the URL
  const keyword = getUTMParameter('utm_content');

  // Check if the keyword is present and update the product title
  if (keyword) {
    const titleElement = document.querySelector('.product__title'); // Adjust the selector accordingly
    if (titleElement) {
      const originalTitle = titleElement.textContent;

      // Check if the title hasn't been modified already
      if (!originalTitle.includes(keyword)) {
        // Create a new h1 element, update its content, and replace the existing title element
        const newTitleElement = document.createElement('h1');
        newTitleElement.textContent = originalTitle + ' - ' + keyword;
        titleElement.parentNode.replaceChild(newTitleElement, titleElement);
      }
    }
  }
});
</script>

I've tried different versions of the code, but the issue persists. The heading appears duplicated. Can anyone provide insights into what might be causing this issue or suggest an alternative approach?

Any help or guidance would be highly appreciated. Thank you!

[Guleria]

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Function to get UTM parameter from URL
  function getUTMParameter(name) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(name);
  }

  // Get the 'utm_content' parameter from the URL
  const keyword = getUTMParameter('utm_content');

  // Check if the keyword is present and update the product title
  if (keyword) {
    const titleElement = document.querySelector('.product__title'); // Adjust the selector accordingly
    if (titleElement) {
      const originalTitle = titleElement.textContent;

      // Check if the title hasn't been modified already
      if (!originalTitle.includes(keyword)) { 
          titleElement.textContent = originalTitle + ' - ' + keyword;
      }
    }
  }
});
</script>

[SureBuy]

I tried that before but then it comes out like this:

including some padding which was already there i forgot to mention, need toget rid of that to.

[Guleria]

Replace
titleElement.textContent = originalTitle + ' - ' + keyword;
with 
titleElement.textContent =   keyword;

[SureBuy]

That removes the whole title and only shows the keyword in paragraph

[Guleria · Accepted solution]

ok found the issue.
You need to replace this line. 
const titleElement = document.querySelector('.product__title'); // Adjust the selector accordingly
with 
const titleElement = document.querySelector('.product__title h1'); // Adjust the selector accordingly 

[SureBuy]

No way man! How did u find that, I was testing for like 4 hours?? Thank you so so much, u got it 😂