Inserting GTM variable instead of HTML object - javascript

I'm trying to implement a marketing tag on a website where the value needed on the tag should come from an HTML object, although when trying to replace this with a GTM variable, no data is transferred into the tag.
These are the instructions from their documentation:
For Google Tag Manager (GTM) integration, create a HTML-object (jQuery
is required) containing and replace all variables with their real
DATA values (cf. next section).
HTML-Object at your checkout page
<div id='transactionString' data-transaction-string='DATA'></div>
Create a custom HTML-Tag in GTM with the following code snippet and
pass the data from the new HTML object. Finally, you can add your
checkout page to the trigger rules of GTM.
Create custom HTML tag in GTM
<script src="https://tracking.crealytics.com/lib/multi_conversion.min.js"></script>
<script type="text/javascript"> var transactionString =
$("#transactionString").data("transaction-string");
__multi_conversion_tracking(70, "transactionString");
</script> <noscript> <div style="display:inline;">
<img> src="https://tracking.crealytics.com/70/multi_check.php?data=transactionString">
</div> </noscript>
Everything is ready in the dataLayer, the formatting and the values are all correct, but the only problem is when I pass these values into the variable of GTM.
This is the custom HTML tag I set in GTM:
<script type="text/javascript"> var transactionString =
$({{VariableInGTM}}).data("transaction-string");
__multi_conversion_tracking(70, "transactionString");
</script> <noscript> <div style="display:inline;">
<img> src="https://tracking.crealytics.com/70/multi_check.php?data=transactionString">
</div> </noscript>
So in short, I replaced
"#transactionString"
for
{{VariableInGTM}}
EDIT:
var divElement = document.createElement("Div");
divElement.id = "transactionString";
divElement.setAttribute('data-transaction-string', products_info);

Related

Why do we use <script "inline" ..> tag while using Java Script

Could someone tell me why "in-line" attribute used inside the tag,
For example:
<script inline type="text/javascript"></script>
Without this attribute, the JS does not load in the page
The 'inline' property does not exist for the script tag.
MDN
Nor does it exist in the list of global attributes
When people say "inline javascript" they're talking about using script tags to put javascript on the page
<script>
alert('hello world!!!');
</script>
Or just into an html tag
click here!
as opposed to in a separate file.
<script src="script.js"></script>

How to subscribe to Windows Media Player events without using an extra script tag?

I'm embedding a Windows Media Player control in an HTML page.
<object width="720"
height="480"
id="Player"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<!-- <param> tags left out -->
</object>
To subscribe to events from the control (e.g. PlayStateChange(newState)), I have to add a <script> tag, like the following:
<script language="JScript" for="Player" event="PlayStateChange(newState)">
var newStateText = document.createTextNode('' + newState);
var playStateContainer = document.getElementById('PlayState');
while (playStateContainer.firstChild) {
playStateContainer.removeChild(playStateContainer.firstChild);
}
playStateContainer.appendChild(newStateText);
</script>
Isn't there a way to subscribe to these event through plain JavaScript (without the extra <script> tag for every event I'm interested in on every single instance of the control)?
With 5 instances of the control and 5 events I want too subscribe to, this would be 25 script tags.
Furthermore, the control is wrapped in some library code in an external JavaScript file. The event handling code should be there too, and not in the HTML of the client application.
According to this MSDN article (see sections Naming Conventions and Automagic), you can write all your event handlers inside the same <script> tag, provided that you name the functions objectname::eventname or objectname.eventname:
<script language="JScript">
function Player::playStateChange(newState) {
...
}
function Player.currentPlaylistChange(change) {
...
}
</script>
I didn't try this though. And of course, this is all IE-specific.

display javascript inside html?

hi all im new to javascript and can't for the life of me get this to display in html
<html>
<head>
<body>
<script type="text/javascript" src="scripts/category.js"></script>
<select><script>
var makeModel = new DynamicOptionList("MAKE","MODEL","TYPE");
makeModel.addDependentFields("MAKE2","MODEL2","TYPE2");
makeModel.forValue("Ford").addOptions("Fiesta","Focus","Taurus"); // Add options if VALUE of option is selected
makeModel.forText("Honda").addOptions("Civic","Accord","Prelude"); // Add these options if TEXT of option is selected
makeModel.forValue("Ford").setDefaultOptions("Fiesta");
makeModel.forText("Honda").setDefaultOptions("Accord");
makeModel.forValue("Ford").forValue("Taurus").addOptions("2-door","4-door");
makeModel.forField("MODEL").setValues("Focus","Taurus");
makeModel.forField("TYPE").setValues("2-door");
makeModel.forField("MODEL2").setValues("Civic","Prelude");
makeModel.forValue("Toyota").addOptionsTextValue("Camry","10-CAMRY","Corolla","20-COROLLA","Celica","30-CELICA"); // Add options with values different from text
</script></select>
</body></head></html>
code from http://www.mattkruse.com/javascript/dynamicoptionlist/ example 3
at the first, you should know that, JavaScript is completely separate from Java!
so, by the way, if you want to write some JavaScript code inside html, you should use script tag inside your <body></body> tag like the example below:
<script type="text/javascript"> // your javascript code here! </script>
as an option, you can add external JavaScript file, and attach it to your script tag like example below:
<script type="text/javascript" src="example.js"></script>
for more information, check out this place.
The example you refer to makes use of an additional library called DynamicOptionList.js that you can find here.
According to the documentation you also need to initialize the library by calling initDynamicOptionLists() in the BODY onLoad attribute (or from somewhere else).

Embedding XML in HTML

How would one go about embedding XML in a HTML page?
I was thinking using CDDATA would be the best approach but I get errors in the HTML document when the page loads.
<script><![CDATA[ ... ]]></script>
I'm needing to embed a XML document for fetching later with JavaScript. I need to do this since when the user opens it, they might not have internet access.
As long as the XML doesn't contain </script> anywhere, you can put it inside the script tags with a custom type attribute (and no CDATA section). Give the script tag an id attribute so you can fetch the content.
<script id="myxml" type="text/xmldata">
<x>
<y z="foo">
</y>
</x>
</script>​
...
<script> alert(document.getElementById('myxml').innerHTML);​ </script>
http://jsfiddle.net/hJuPs/
How about:
<script>
var xml = '<element> \
<childElement attr="value" /> \
</element>';
</script>
That would enable you to easily embed the XML for later retrieval in javascript.
According to the tutorial here, you can use the 'xml' tag to embed XML data within an HTML document. However, this implicitly displays the XML data in the browser.
http://www.expertrating.com/courseware/XMLCourse/XML-Embedding-HTML-8.asp

How can I read json content inside a <script> tag?

So when I want to put a Google +1 button on webpages, I would do this:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'zh-TW'}
</script>
But I am wondering, there is an object in the script tag, but it is also loading plusone.js! At the end the script can also get the object inside the tag. How does Google do that? Unlike normally I would not put anything inside. Normally I would do
<script type"text/javascript" src="script.js"></script>
Since the URL is known, it's simple enough:
JSON.parse(
document.querySelector("script[src='https://apis.google.com/js/plusone.js']")
.innerHTML.replace(/^\s+|\s+$/g,'')
);
That said, as Alohci pointed out in the comments, the last script on the page will be the last one loaded when the script runs, because (unless specified otherwise) scripts are blocking. Therefore, this would work:
var scripts = document.getElementsByTagName('script');
var data = JSON.parse(scripts[scripts.length-1].innerHTML.replace(/^\s+|\s+$/g,''));

Categories

Resources