<script>
var x = "i am the value";
</script>
<span itemprop="name">x is : {{x}} </span>
I think x should show some output but it is displaying empty when rendering. anyone can tell me how can I show the js variable in bigcommerce handlebar template
I'm not certain what you're trying to do, the value in the script element is not available at the time the handlebars template is rendered. The handlebars template is processed by bigcommerce to give html to the user's browser, the user's browser then executes the javascript in the script tag.
If you want to have an element on the page reflect the value of a javascript variable, you'd need to do that yourself (e.g. with a onload event).
If you want to be able to determine the value of a stencil handlebars value, you can use assign.
{{assign "x" "i am the value"}}
<span itemprop="name">x is : {{x}} </span>
Related
Hello I have this code on my website that gives the query of a site search in the attribute 'value'
In this case, it is the word 'disjoncteur' that want in my variable in GTM.
<div class="dfd-searchbox-main">
<input type="search" name="search[query]" value="disjoncteur" autocapitalize="off" autocomplete="off" autocorrect="off" class="dfd-searchbox-input" id="dfd-searchbox-id-MIkFo-input" placeholder="Chercher…" dfd-value-indices="" dfd-hook="Input">
<div class="dfd-searchbox-autocomplete"></div>
What should i do to fetch that value in a variable ?
Thanks for the help
A general solution would be making a custom JS variable in GTM looking like this:
function(){
return document.querySelector("input[type='search']").value;
}
However, it's a little bit awkward due to how universal it attempts to be. And realistically, you likely only need that search value on the CTA click, so a relative path from that CTA could have been used through a {{Click Element}} variable. That would be a cleaner solution.
And, of course, the best solution would be asking front-end devs to give you the value with a dataLayer push so that you wouldn't need to rely on the html structure of the page to get your info.
Update:
I acheived to create a dom element variable by inserting the class of the element into ID and the attribute "value" as the attribute, it works like a charm.
I have the following button, for which I want to create a Google Tag Manager trigger (but I seem to be unable to do so):
<div class="class-a class-b">
<form class="class-c" action="https://www.example.com/test" method="get" onclick="window.open(this.action); return false;">
<button type="submit">Open now</button>
</form>
</div>
Which type of trigger should I use (the auto-event variable does not
work)?
How would I need to configure the trigger to track a button
click?
What would I need to do in order to also catch the action
value (i.e. the URL https://www.example.com/test)? Would I need Javascript for that to bind to its submit? If so, how?
You want to use the Any Click: All Elements.
In the trigger, you enable the "Some clicks" Then Click Element -> Matches CSS Selector -> button[type="submit"]
Optionally, you can add more conditions there.
Use this trigger in a new Tag. Use the Universal Analytics as a tag type.
Tag settings: change it from Pageview to Event. Now you have three fields for Category, Action and Label of your event.
Then you want to set your Action as a URL. Start typing {{ in that field and pick the variable to populate there like so:
That should be it.
Update to address the actual html given:
So just return this value in your CJS var:
{{Click Element}}.parentElement.getAttribute("action");
It should work for the exact html situation that you've provided.
Then use this CJS in your tag and you should be good.
I'm working on Google Tag Manager/Analytics for a site, here's an example page that a tag is being fired on:
https://www.forktrucktraders.co.uk/listings/refurbished-combilift-multi-directional-gas/
The tag is fired when the "Send Message" button on the contact form is clicked:
https://imgur.com/a/qTPb3Ci
Right now I've got the event's action returning the URL of the current page the form was sent from, but I'd like to know if it's possible to get the href from the "Visit dealer's website" link on the page, as it would give a faster idea of which dealer the listing is coming from. Probably a long shot to make this happen solely through Tag Manager (if not possibly just a hidden bit of data that just has the dealer's name in on the "Send Message" button) but I'd appreciate any input.
You most certainly can. Off the top of my head something along the lines of the following should work...
It depends on whether you prefer just having the url or breaking it down further.
Just the URL:
Create the following in a custom HTML tag within GTM
<script>
//This selects your desired href:
var dealerURL = document.querySelector(".stm-dealer-image-custom-view a").href;
//This pushes the value into the dataLayer temporarily for use later:
window.dataLayer.push({
event: 'formSubmit',
dealer: dealerURL
})
</script>
Ideally, this should be fired on page load of all your listings pages.
Next create a new User-Defined Variable of the dataLayer var type
within GTM corresponding to dealer, this will store the value to be
pulled through in your event.
Now just change your event action to {{dealer}} (or whatever you
ended up naming the datalayer variable), and this value should be
pulled through in your event.
Getting the dealer name:
Now presuming the href format is always the same across the site you could split this by a delimiter instead:
var dealerURL = document.querySelector(".stm-dealer-image-custom-view a").href;
var dealerSplit = dealerURL.split("/");
var dealer = dealerSplit[4];
The above would leave you with a variable containing the string 'hitec'.
This however is quite prone to breaking if the page path does not always follow the same format, as such it would be better to use RegEx instead.
To answer your specific question, you would need to create a variable to target that specific link element that contains the dealer's website's url. The simplest way is probably to add an id to the <a> element and create a variable in GTM to track it.
I had a quick look at your site and I think you have more problems with the form.
Your even triggers without validating the form, this would lead to extra events.
The event category, action and label could use some work in organizing it to help you analyze the data
You also have a mix of gtag.js and GTM snippet on the page, I would say this is not normal practice, usually, GTM is enough. You can contact me through my profile if you'd like to chat more about it.
I am learning Polymer to make a small single page app.
I would like to manage pagination as it is done in the Polymer starter kit, but without using the template dom-bind (because I need one later in the page, and we cannot have one nested in another).
So, I tried to make my own custom element in order to bind its attribute "route" to the iron-pages element. But, as you can imagine, it did not work.
So I tried to make data binding work in a small example. As shown in the "Quick Tour of Polymer", I have made a custom element in "pagination-element.html" :
<link rel="import" href="../bower_components/polymer/polymer.html">
<script>
Polymer({
is: "pagination-element",
properties:{
route : {type:String, value:"/", notify : true}
}
});
</script>
and using it in my page (I have checked that pagination-element.html is imported) :
<pagination-element id="app" route="/">
<paper-input label="{{ route }}"></paper-input>
</pagination-element>
Then, I tried to get the "route" value with an other Polymer custom element, but it only displays me "{{route}}" on my page.
I think I have not understood how data binding works...
Can anyone help me ?
Thanks a lot !
Have a good day
On your page you will need to wrap your pagination-element in an auto binding template using (unless you are using this inside another element):
<template is="dom-bind">
In your paper-input you are setting the label to be the value of route but you have not given route a value. I'm guessing you want the value of it to be that of the route property on the pagination-element:
So in your index.html or other page:
<body unresolved>
<template is="dom-bind">
<pagination-element id="app" route="{{route}}">
<paper-input label="{{route}}"></paper-input>
</pagination-element>
</template>
</body>
I am trying to refresh a sidebar.php in wordpress on a form submit (that is in a widget on the sidebar.php).
I have video on the page and if the entire page refreshes, the video has to play from the beginning.
I need a solution to simply refresh the sidebar.php when someone submits the form ... I am not an expert php programmer so simple is best!
btw. I am using formidable plugin for the form.
thanks in advance!
Sounds like a job for ajax!
Now, you could do it from scratch, but that would be unnecessarily painful. Instead, I recommend including jquery into your page by adding this into your header
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
(which uses the latest version, which is hosted on google)
Now that you have jquery loaded, there are many easy ways to submit your data without interrupting the flow of things. Here is how I would do it (I am assuming that you are using method="post"):
Change your <input type="submit" > into a <button>, so clicking on it doesn't trigger the built-in form submit (which would interrupt your video).
Set the id attribute of your button to something so that you can reference it easily like <button id="mysubmitbutton">. (While you are at it, give id attributes to all the form fields you care about if you have not already so that you can reference them easily as well, like <input type="text" name="firstName" id="firstName"> instead of just <input type="text" name="firstName">)
Inside the <head> portion of your website, add some code that looks like something like this:
<script type="text/javascript">
//makes it so that it goes after the html document is ready for it
$(document).ready(function() {
//this ties a onclick event to your button you made
$("#mysubmitbutton").click(function(){
//when the button is clicked, it will asychronously post to where you want it to
$.post("urlthatwasinyouractionequalsattribute.php",
{
//put all your post variables here, referencing the ids you made earlier
firstName: $("#firstName").val(),
time: $("#time").val() //be sure you don't have a trailing comma on the last one
},
function(data) {
//data is whatever the other website sends back. do whatever you want here...
alert("Result: " + data);
});
});
});
</script>
Fire it up and it should work. Obviously, you will need to change the values so that it matches your form, etc.
Hope that helps! Please mark as answer if it did.