Implement Code Block and Position over DTM ? | Community
Skip to main content
V
vitalin58577727
Level 4
April 25, 2019
Solved

Implement Code Block and Position over DTM ?

  • April 25, 2019
  • 3 replies
  • 2112 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Asheesh_Pandey

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 replies

Asheesh_Pandey
Community Advisor
Asheesh_PandeyCommunity AdvisorAccepted solution
Community Advisor
April 26, 2019

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

- Asheesh
V
vitalin58577727Author
Level 4
April 26, 2019

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>
Asheesh_Pandey
Community Advisor
Asheesh_PandeyCommunity Advisor
Community Advisor
April 28, 2019

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

- Asheesh
Terms & ConditionsAccessibility statement

Loading footer...