i ask you support to solve my issue. I made a custom code to dinamically fire schema.org snippet data on my site.
I need to trigger this only for blog post. My blog post is identified by this code:
div class="span12" data-motopress-wrapper-file="single.php" data-motopress-wrapper-type="content">
so when i find single.php i have to trigger the right tag into Google Tag Manager.
I need to create a custom dom variable, but i can't reach to understand how to do it. Thanks.
You should be able to create a DOM Element variable with the following configuration:
Selection Method: CSS selector
Element Selector: [data-motopress-wrapper-file]
Attribute Name: data-motopress-wrapper-file
And that variable should return single.php which you can then use a trigger (eg if {{My Dom Element}} equals single.php)
Alternatively, you can create a Custom JavaScript variable:
function() {
var attr = "data-motopress-wrapper-file";
return (document.querySelectorAll('['+attr+']')[0]).attributes[attr].value;
}
If you have multiple data-motopress-wrapper-file elements on your page, then you can create a function that will search for the specific single.php and return true/false based on its presence:
function() {
return (document.querySelectorAll('[data-motopress-wrapper-file="single.php"]').length>0);
}
Related
I have some long lists of buttons. For example, i have one single list of car models that all have the same custom data attribute of "modellist", while they have also another data attribute which is the name of that car model (Note that these buttons are NOT links).
the attached image
Now, without the need of creating a single tag for each and every one of these buttons, i need to find a faster way for this case using the google tag manager and GA4 (google analytics 4), so that i would be able to track clicks on these buttons. Does anyone know how can i do this?
I very highly appreciate your help & support here.
Here are the steps and how to do it.
1. Create a Custom JavaScript Variable;
Here is the Screenshot
The code is:
function(){
// Get the click element;
var clickElement = {{Click Element}};
// Check there is a closet parent element you want. If it doesn't then return false;
if(!clickElement.closest("div.stepped-selection__list-item"))
return false;
// Check the parent dom has the attribute you want.
// If it does, return the attribute value. Otherwise, return false;
var modelListDom = clickElement.closest("div.stepped-selection__list-item");
if(modelListDom.hasAttribute("data-trackervalue")){
return modelListDom.getAttribute("data-trackervalue");
}
return false;
}
2. Create the trigger
Here is the screenshot:
First, using the click element > match css selector > To catch all the element inside the selector. You can modify it a bit to make it more suitable in your real case.
Second, the Variable we create in step1. It will return false if something not we expected. So we don't want to trigger the tag if the Variable is return false.
3. Create the Tag.
The Tag config is the easiest one.
Just use the Trigger in step2.
And give the event name and event parameter you would like.
Give the event parameter value as the Variable in Step1.
I made a script that connects to a WP video plugin and generates a floating menu over it. The script works fine inside the WP page but it does not work when I use the plugins SHARE&EMBED function when it generates a link to my video that is used to incorporate it into another page structure. When embedding the into the outside webpage my custom Js script does not work. Better to say it works because my js and css files get connected to the head of the new page and the menu is present inside the structure of the page but it is covered by the new div elements generated by the plugin.
WordPress video plugin that I use generates an iframe tag. When I examine the page in which I embed the link to the video, in developer mode, I see that the is placed inside a tag that is outside the page's tag. When I try to access the Iframe tag with document.getElementsByTagName("iframe") or by its' id I get an error message that the element does not exist. I tried to use "document.addEventListener('DOMContentLoaded',..." and "if(window.fwduvpPlayer0)..." but it still i can not access the the tag with my video.
document.addEventListener('DOMContentLoaded', function displayMenuBtnOverVideo() {
generateMainMenuButton1();``
if (window.fwduvpPlayer0 && document.getElementsByTagName("iframe") != null) {
shareAndEmbed();
}
});
document.addEventListener('DOMContentLoaded', function displayMenuBtnOverVideo() {
generateMainMenuButton1();``
if (window.fwduvpPlayer0 && document.getElementsByTagName("iframe") != null) {
shareAndEmbed();
}
});
function shareAndEmbed() {
let getIFrameDiv = document.document.getElementById("fwduvpPlayer0youtube");
getIFrameDiv.insertAdjacentHTML("beforebegin",
`<div class="show-menu top-left" id="menuBtnDiv1">
<button class="btn btn-sm" id="menuBtn" onclick="videoOverlayMenuGenerator1()">
<span class="iconify" data-icon="whh:menu" data-inline="false"></span><span class="menu-button-title"> MENU emb</span>
</button>
</div>`
);
The idea is that I want my script to access he iFrame tag by its' id and include before it the div tag with the code for my custom menu.
You are selecting the document property within document. That property does not exist.
let getIFrameDiv = document.document.getElementById("fwduvpPlayer0youtube");
Maybe you tried to get the <html> tag which is the documentElement property in document.
documentElement only has three methods to select elements.
getElementsByClassName
getElementsByTagName
getElementsByTagNameNS
In order to access to a element that is not into the tag, you can try to use this options:
window.parent.document.getElementById()
OR
window.top.document.getElementById()
Maybe, with this you would can to access to this elements.
I hope that this, help you.
Regards
I'm trying to tweak the WordPress plugin https://github.com/algolia/algoliasearch-wordpress to suit our needs. What we want to be able to do is have a search result that will load the data up in the same page.
I have my WordPress posts and its data being indexed successfully. I have added a search box to the page, and autocomplete is being fired.
Out of the box, the WordPress plugin template wraps the result in an anchor tag and assigns it the URL of the found result. When clicked, this navigates you to that post. However, what I want to do is intercept that click and load the result in the same page without navigating away.
I have removed the href from the anchor. I have also edited the supplied autocomplete.php template where the call to autocomplete:selected occurs. In there I have removed the call to navigate away by removing window.location.href.
Now I have two main issues.
1 - When the user clicks the search result I would like the input to be populate with the title of the item they clicked on. I added this in the autocomplete:selected callback by adding $searchInput[0].value = suggestion.post_title. Which seems to change the value of the input correctly, but as soon as I click away from the input, it is re-set back to the original typed value. So if I type 'may' and click the result 'mayonnaise', the result data can be accessed but the input returns back to 'may'. My function looks this:
/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
.on('autocomplete:selected', function (e, suggestion) {
console.log(suggestion);
autocomplete.autocomplete.close();
});
2 - It seems that the autocomplete dropdown does not hide when the user clicks away. To resolve this i've had to use what I think is a bit of a nasty hack with jQuery. I was wondering if this is really required? My code just below the autocomplete:selected call looks like this:
jQuery('body').on("click", function(event){
if (!jQuery(event.target).closest($searchInput[0]).length) {
autocomplete.autocomplete.close();
}
});
Found some answers to my questions.
1 - In order to populate the input with the title of the selected search result I added a call to the setVal method of the autocomplete object. I'[m still not sure why this is required.
/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
.on('autocomplete:selected', function (e, suggestion) {
autocomplete.autocomplete.setVal(suggestion.post_title);
});
2 - It looks like the config of the autocomplete object uses the value of WP_DEBUG in order to set the debug value. The options available for the autocomplete component can be found here https://github.com/algolia/autocomplete.js#options. This lead me to find that when debug is set to true, the autocomplete box does not hide on selection. This is to allow for easier debugging and styling of the component.
How do I configure the rules in Google Tag Manager if I want to restrict the Click-Events to just an element and its subelement?
I've found https://support.google.com/tagmanager/answer/3420054?hl=en#ClicksOnLinks
But I can't see how I setup a rule to restrict the events.
Easiest way is propably to assign a class name or an id to the element. This will be accessible trough the element classes or element id macro (those macros will be set up automatically by GTM). You can then create a rule "fire where event equals gtm.click and element.classes contains myclass".
Jerry, create an click listener according to the manual you linked.
Then, to track all click on elements and its subelements, custom macro and a bit of jQuery is probably the best way to go. Consider this Custom JS macro that would return 'nav' string if a clicked element has an ancestor with the ID nav.
function() {
var el = {{element}};
while (el && el !== document.body && el.id !== 'nav') {
el = el.parentElement;
}
return el.id === 'nav';
}
I have seen this on Google Product Forum, but I couldn't find the post itself. To give a proper credit though, it was posted by Brian Kuhn (Tech Lead for GTM).
Using these two macro-based rules should then do the trick:
{{event}} equals gtm.Click
{{element id}} contains nav
Hope this helps!
I have a problem at which I have a view that will display a featured item and 6 rows on the first page of the view, while displaying 9 rows on the rest of the pages. Is such a functionality possible with views?
Thanks!
A few methods I can think of. I have mentioned them on the basis of how long it will take you.
1) Create a custom css rule which hides two entries on the first page. As for the rest of the pages you can show it.
2) Find the template file of your particular views and then use php to hide those rows. You can find the name of this file in your views theme section.
3) You could write a php module which can do the same as views. Its not that hard to get it done.
UPDATE
Below is the jquery which will help you get the logic right
$(document).ready(function() {
var pathname = window.location.pathname;
// here we assignt he current url of the page to the var pathname
});
if(pathname =='firstPageofView')
{
// if the path name is the first page of the view then we assign special css formating
$('#divid').hide();
}
else
{
$('#divid').css('width','10px');
}
Cheers,
Vishal