How can I update product headings using a keyword from a custom URL parameter in JavaScript?

Topic summary

Goal: Dynamically append a keyword from a Google Ads URL parameter to product titles across a Shopify product page.

Context: The keyword comes from the utm_content parameter (e.g., …?utm_content=keyword1). UTM parameters are tracking tags in URLs used for marketing attribution.

Attempted approach (code central to the discussion): On DOMContentLoaded, use URLSearchParams to read utm_content, select the title element (.product__title), and if present and not already containing the keyword, create a new h1 with “originalTitle - keyword” and replace the existing element.

Result/problem: The page displays a duplicated title followed by the keyword (e.g., “Blue ball Blue ball keyword1”), indicating the title is being repeated before the keyword is appended.

Additional note: The goal is to apply this behavior to all product headings, not just one element, but the current code targets a single selector.

Status: Partially working but unresolved. The duplication issue remains, and no confirmed fix or final decision has been posted. Open questions include how to prevent duplication and how to correctly target all relevant headings.

Summarized with AI on January 9. AI used: gpt-5.

I’m looking to dynamically update the headings of products on my Shopify store based on a keyword extracted from a custom URL parameter. The custom URL is generated from Google Ads, and I want the script to read the keyword from a specific parameter (e.g., utm_content). I’ve tried the following JavaScript code, but it doesn’t seem to work. Could you please review the code and provide any insights or improvements? I tried this example code:


Any assistance or suggestions would be greatly appreciated! Thank you.

I actually got it to work with this:

But now it shows the title twice and then the keyword. Like this: Blue ball Blue ball keyword1