Can we use DTM to add the script in the middle of the page?

Question

I have a request to add some tracking script in the middle of the page. This will show up as a widget in the page. We have an option to add the script in DTM either at the top or bottom. But is there a way we can add the script at the middle of the page as per our requirement. Please let me know.

Answer 1

DTM (or any tag manager really) isn't really designed for this sort of thing. Tag Managers are meant to be an alternate way to host snippets of code, js libraries, and other resources, and most of them are primarily focused on remarketing tags. They aren't meant to be a replacement for a content management system (cms) for your site.

So for example, when you specify a rule to output a tag at bottom of page in DTM, it doesn't add the script to the bottom of the page; it just executes it when the footer script executes, at the bottom of the page. Where it actually gets appended to on the DOM isn't really relevant. IOW "location" doesn't really mean positions on a page; it's really more about timing.

Having said that, you can certainly write your own native javascript, css, and html to dynamically add something to a page at specific position, and host that code in DTM.

Here is a random example where I dynamically add a white box to the center of a web page (using jQuery for brevity)

$(function() {
    $('<div/>').css({
        'border' : 'solid black',
        'position' : 'absolute',
        'background-color':'white',
        'width' : '100px',
        'height' : '100px',
        'left' : '50%',
        'top' : '50%',
        'margin-left' : -$('.className').width()/2,
        'margin-top' : -$('.className').height()/2
    }).appendTo('body');
});

This obviously isn't exactly what you need. But it just demonstrates you can write code to output and position it yourself, and then just host that code in DTM.

Or, you can select some existing element on the page that is already where you want it to be output and append it to there, etc..