Adding Custom HTML Codes

With the JENTIS Code elements you can use JavaScript code snippets that activate client-side (on the frontend effectively on the users device). A powerful tool to itself, but what if my requirement is a bit more "straight forward" HTML? Copy-pasting the markup code to the JavaScript will not work out. Though, we have workaround coming for you.

Prerequisite

Let's assume we have a HTML tag that must be implemented to our website. The following might be a possible candidate:

CODE

<script type="text/javascript" data-key="1" src=https://cdn.example.com/deliver/some.js async></script>

The idea here is to transpose this markup to a simple and readable JavaScript pendant, that will paint such an element to your frontend website. Effectively the same as just copy-pasting it to a tag management solution (where the input possibly was "Custom HTML").

Transposing HTML to JavaScript Code

Go to the JENTIS "Server Tag Manager: Codes" section to implement a new code element.

(click "Add New Code", give it a name and paste the following code to it)

With the magic of JavaScript we can create basically the same HTML element with the following code:

CODE

// create the script tag
let scriptTag = document.createElement("script");

// set the attributes for the script tag
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("data-key", "1");
scriptTag.setAttribute("src", "https://cdn.example.com/deliver/some.js");

scriptTag.async = true;

// Append the script tag to the head
document.head.appendChild(scriptTag);

So any attribute from the "<script ...>" is set via "setAttribute('name', 'value');". You can adjust this section according to your requirements. If your HTML element has different and/or other attributes, you must add according lines of code, just like the other "scriptTag.setAttribute" function calls. Line by line. Further the last line of code "document.head.appendChild()" will make sure the according element is painted to the site and hence the users browser will load the according source you just defined.

Adding an IMG-Tag

If the element you want to add is not a "<script..>" tag but an image, you only must adjust the "createElement("script")" to "createElement("img")". Further you'd need to append this element to the body (and not the head): document.body.appendChild(...). Et voilà!

We hope this little workaround will help you to create all elements as you need them.