Cannot get Google Tag Manager to overwrite a Title tag with this javascript and can't figure out why

Question

My Custom HTML tag and trigger, designed to overwrite both the Title tag and the Description tag on two website pages, is only overwriting the Description tag and not the Title tag. I cannot figure out why it's not working. Here's the code:

<script>
  var pageURL = {{Page-specific Tags}}; 

  // Set the title and description tags based on the page URL
  switch (pageURL) {
    case "https://sandmeyersbookstore.com/events/printers-row-lit-fest-2023":
      document.title = "Printer's Row Lit Fest 2023 (September 9-10) | Sandmeyer's Bookstore in the South Loop";
      var metaTag1 = document.querySelector('meta[name="description"]');
      if (metaTag1) {
        metaTag1.setAttribute('content', 'Sandmeyer\'s Bookstore in the South Loop invites you to the amazing-to-experience Printers Row Lit Fest, a community-based celebration for book lovers.');
      }
      break;

    case "https://sandmeyersbookstore.com/events/banned-books-week-2023":
      document.title = "Banned Books Week 2023 (October 1-7) | Events at Sandmeyer's Bookstore in Downtown Chicago";
      var metaTag2 = document.querySelector('meta[name="description"]');
      if (metaTag2) {
        metaTag2.setAttribute('content', 'Sandmeyer\'s Bookstore in Downtown Chicago is offering discounts on banned books during Banned Books Week 2023.');
      }
      break;

    default:
      // Default values if the page URL doesn't match any specific cases
      document.title = "Sandmeyer's Bookstore in Chicago | Printer's Row and South Loop Independent Bookstores";
      var metaTagDefault = document.querySelector('meta[name="description"]');
      if (metaTagDefault) {
        metaTagDefault.setAttribute('content', 'Our Chicago independent bookstore has delighted South Loop and Printer\'s Row neighbors and visitors since 1982.');
      }
      break;
  }
</script>

Because the Description tag is being overwritten successfully, I believe I can rule out the possibility that my trigger (uses a Regex Table) isn't working or that the pageURL variable is not getting the right value. It has to be something with the Javascript above either not working with respect to title tag rewrite, or working and then being overwritten by my webstore/CMS provider's code. I haven't figured out yet how to use debug mode so if that's what is necessary to figure this out, please dumb it down for me with some specific instructions or I can go read up on that (probably should do that anyway).

Thanks if you can help. Also, I know many people don't approve of this technique, but my vendor doesn't give any page-specific control over title and description tags, so this is my only option, other than having bad SEO on the site.

Answer 1

Didn't seem like anybody could help me on this one, so I kept tinkering away. In the end, I added a Delay Trigger (2 seconds) and added that and my other trigger into a Trigger Group. Finally, I set the trigger for my Custom HTML tag to be the new Trigger Group trigger.

This effectively delayed my updates to the DOM by 2 seconds, preventing my changes from being overwritten by any other DOM updates in process via other scripts/code.

Now, when I look at the page, I see both the new Title tag and the new Description tag. Not sure if Googlebot will wait the two seconds to see the rewrites, but I guess time will tell. (They often don't use the in-HTML tags anyway these days, so I may never know if this works but worth a try.)