Implement Code Block and Position over DTM ?

[#1]

Hello, everyone,

maybe someone can help me.

I want to use the Adobe Tag Manager to implement a code block (HTML + JavaScript) so that it is displayed to the users.

Widget-Box from Partner Like Affilaite.

Currently the code block (HTML + JavaScript) is displayed at the bottom of the page.

My question is how do I place the code in the middle of the page or in the right place?

I have the following options:

1. hard code in the source code (without Adobe Tag Manager)

2. position the div tag correctly with the Adobe Tag Manager and then via CSS

3. with the Adobe Tag Manager via JavaScript like e.g.  https://developer.mozilla.org/de/docs/Web/API/Element/insertAdjacentHTML

Can anyone give me a hint on how I can best do this?

What is the right solution?

Best Regards

Vitali

[#2 · Accepted solution]

Hi Vitalin,

|| It depends on your need, time and access to the site source code. ||

Consider a scenario when you need it for a short time, don't want to go in a lengthy site publishing cycle to add and then remove it from the site or you have limited access to the source code. If any of the above reason suites your requirements than Adobe Tag manager is your best friend.

How to do it right -

1. Identify the page where you want to position it.

2. Add a placeholder container e.g. <div id="placeholder" /> on your page or find an existing container and reference to its id or class property to inject your widget.

3. Create a page based rule in DTM with condition match with your identified page. It should fire when DOM is ready.

4. Use Third-party Script section and  Non-sequential HTML section to add your snippet followed by widget script.

5. Save and publish.

Issue: You may observe flicker while loading widget on site. You actually don't have control over its load timing.

Good Luck!

Thanks!

Asheesh

[#3]

Hi,

I think you should create a function which listens to placeholder position and inject your script when it's ready. A front-end developer should be able to help you create this function for you.

Thanks,

Asheesh

[#4]

Hallo Asheesh,

How can I place my code at a specific point in the source code?

What settings do I need to make?

I would like to place the following code on a page.

MyCode

<div id="gutschein1">
  <div id="sovendus-container-1"></div>
<script type="text/javascript"> 
//<![CDATA[ 
window.sovIframes = window.sovIframes || []; 
window.sovIframes.push({ 
trafficSourceNumber : document.__dtm_sovendusID[0], 
trafficMediumNumber : document.__dtm_sovendusID[1],  
sessionId : digitalData.transaction.transactionID,  
timestamp : Date.now(), 
orderId : digitalData.transaction.transactionID, 
orderValue : digitalData.transaction.total.transactionTotalLC, 
orderCurrency : digitalData.transaction.total.currency, 
usedCouponCode : digitalData.transaction.total.voucherCode, 
iframeContainerId : 'sovendus-container-1'
}); 
var sovDomain = window.location.protocol + '\x2F\x2F' + 'api.sovendus.com'; 
var sovJsFile = sovDomain + '\x2Fsovabo\x2Fcommon\x2Fjs\x2FflexibleIframe.js'; 
document.write('<sc' + 'ript async="true" src="' + sovJsFile + '" type="text/javascript"></sc' + 'ript>'); 
//]]>
</script> 
</div>