Solved

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

SureBuy
Excursionist
47 2 11

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>

 

Capture.PNG

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!

Accepted Solution (1)
Developer-G
Shopify Partner
2987 588 833

This is an 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 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 6 (6)

Developer-G
Shopify Partner
2987 588 833
<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>
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
SureBuy
Excursionist
47 2 11

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

Capture.PNG

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

Developer-G
Shopify Partner
2987 588 833

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
SureBuy
Excursionist
47 2 11

Capture.PNG

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

Developer-G
Shopify Partner
2987 588 833

This is an 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 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
SureBuy
Excursionist
47 2 11

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