{"id":109268,"date":"2025-02-25T14:23:30","date_gmt":"2025-02-25T14:23:30","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/gtmtips-add-html-elements-to-the-page-programmatically\/"},"modified":"2025-02-25T14:23:30","modified_gmt":"2025-02-25T14:23:30","slug":"gtmtips-add-html-elements-to-the-page-programmatically","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=109268","title":{"rendered":"#GTMTips: Add HTML Elements To The Page Programmatically"},"content":{"rendered":"


\n<\/p>\n

\n

One of the annoying quirks of Google Tag Manager<\/a> is that it strips out any non-standard HTML attributes from elements you add to Custom HTML tags. I\u2019m using \u201cnon-standard\u201d as a qualifier here, because I don\u2019t have an exhaustive list of attributes that are ignored. But at least data attributes<\/strong> (e.g. data-id<\/code>) and attributes with custom names (e.g. aria-labelledby<\/code>) are either stripped out upon injection, or GTM might actually prevent you from even saving the container if the Custom HTML tag has elements with these attributes.<\/p>\n

So this tip might be very useful to you if you want to annotate your custom HTML elements with custom attributes.<\/p>\n


\n X<\/span><\/p>\n

\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n

\n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n

<\/span><\/p>\n

Tip 73: Add elements to page programmatically<\/h2>\n
\n

<\/p>\n

\"Add<\/p>\n

<\/a><\/p>\n<\/div>\n

Here\u2019s the problem. Say you have an element that looks like this:<\/p>\n

If you add that line to a Custom HTML tag, the actual element that ends up on the page will look something like this:<\/p>\n

\n

<\/p>\n

\"Element<\/p>\n

<\/a><\/p>\n<\/div>\n

As you can see, the data attribute is stripped out.<\/p>\n

Here\u2019s another example. Say you have an element that looks like this:<\/p>\n

This won\u2019t even let you save the container. You\u2019ll see an error message like this:<\/p>\n

\n

<\/p>\n

\"Invalid<\/p>\n

<\/a><\/p>\n<\/div>\n

This is unfortunate, because there might be good reason to add these custom attributes to your elements.<\/p>\n

So, here\u2019s the solution<\/strong>. Use JavaScript<\/strong> instead! You can rewrite the Custom HTML tag to add the element to the page using JavaScript, and thus you can add any custom attributes to it that you want.<\/p>\n

Here\u2019s how it works.<\/p>\n

\n