Manipulatig radio buttons for Google optimize AB testing - button

I have a problem with radio buttons when I try to create a different version of a page to test on Google optimize. Specifically checkout page.
Right now I have it automatically selected to check out as a registered user, in the other variation of the AB test, I would like to make it show check out as a guest first. To explain better, I would like the option "check out as a guest" to be the default selected when a user lands on the checkout page.
Here is the code for the both radio buttons, so if anyone could help me to make the other one pre selected for the test I would really appreciate it.
<div class="accordion__content m-top--s m-bottom--m">
<div id="radio-button-sign-in" class="flex flex--top m-top--s checkout-box fake-radio fake-radio--active js--action" data-do="fake-radio">
<div class="flex__item flex__item--autosize checkout-radio checkout-radio--checked"></div>
<div class="flex__item accordion__input-content js--action" data-do="fake-radio">
<h3 class="t--uppercase m-bottom--0">Sign in</h3>
.
.
<div class="flex flex--top m-top--s checkout-box fake-radio js--action" data-do="fake-radio">
<div class="flex__item flex__item--autosize checkout-radio"></div>
<div class="flex__item accordion__input-content max--500 js--action" data-do="fake-radio">
<h3 class="t--uppercase m-bottom--0">Brez prijave</h3>
<div class="accordion__details m-top--xs">
<div class="woocommerce-billing-fields">

Related

Track image clicks with links on Google Tag Manager

I'm trying to get a thing work for a week and no success. Really need some tips.
I have an Wordpress website built with Elementor.
This site has 10 different images with different links (they are links to stores that sell my product).
I'm trying to do something automatic in GTM that when I click on one of the stores (image with link), it shows me the variable - that is, the name of the store - that I added as an attribute in Elementor.
My question is whether it's possible to make this variable value show automatically so I don't have to create 10 different tags. I say this because I have 5 more sites in the same type of construction that I imagine I will have to do manually.
I followed this example and it almost worked - : https://www.youtube.com/watch?v=MUyJeRDKt0kThe problem is that he has a class naming, but I don't. I have only link attribute.
Something like this:
Product > Sells in Walgreens, Walmart, Costco, etc .
Attribute name and value:clickstore - wallgreensclickstore - Walmartetc.
Why I'm trying to do that? To mark as a conversion in GA4.
Any tips?Thanks a lot!
#BNazaruk
please se the image of the html
The tag fired, but doesn't populate the values automaticcaly!
#BNazaruk, sorry about the delay.
Please see below :)
That's an example with 2 stores.
Thanks a lot for the support!
<div class="elementor-element elementor-element-6511396 e-container--column e-container" data-id="6511396" data-element_type="container"> <div class="elementor-element elementor-element-4ea1df3 elementor-widget elementor-widget-image" data-id="4ea1df3" data-element_type="widget" cliquefarma="Store1" data-widget_type="image.default">
<div class="elementor-widget-container">
<div class="elementor-image">
<a href="link for store 1" target="_blank" rel="nofollow noopener" cliquefarma1="Store1">
<img decoding="async" width="220" height="157" src="storeimage1.jpg" class="attachment-large size-large" alt="" loading="lazy" /> </a>
</div>
</div>
</div>
</div><div class="elementor-element elementor-element-715f6ca e-container--column e-container" data-id="715f6ca" data-element_type="container"> <div class="elementor-element elementor-element-92cd80b elementor-widget elementor-widget-image" data-id="92cd80b" data-element_type="widget" id="cfarmacia1" cliquefarma="Store 2" data-widget_type="image.default">
<div class="elementor-widget-container">
<div class="elementor-image">
<a href="store 2 link" target="_blank" rel="nofollow noopener" cliquefarma1="Store 2">
<img decoding="async" width="220" height="157" src="storeimage2.jpg" class="attachment-large size-large" alt="" loading="lazy" /> </a>
</div>
</div>
</div>
</div>

All custom fields are not working properly

I was working on a wordpress site and I have used Advanced Custom Fields plugin. I have also used Team Members plugin and after adding team members the shortcode that was generated I have put that on the Team custom field. But it was not reflecting. I have checked source code, the section was missing there
Also, I have tried using the same shortcode on the other fields, that worked but it's not working on the team field
Here I am sharing the screenshot. https://www.screencast.com/t/4tyIpfCz3N
<div class="container">
<div class="row text-center">
<div class="col">
<h2>Meet The Team</h2>
</div>
</div>
<div class="row">
<div class="col">
[tmm name="core-team"]
</div>
</div>
</div>
I have used the above code on the team field. On other fields it was working but it wasn't working only on that particular section
Any kind of help will be appreciatable
You need to get_field( 'team' ) in your template file, additionally you need to wrap this in do_shortcode(), as below:
echo do_shortcode( get_field( 'team' ) );
BUT there are lots of things wrong with how you are approaching this. You shouldn't be putting HTML in a WYSIWYG ACF field, they aren't built for that. Your HTML belongs in a template file. The point of ACF is to make things easier for end users to update and you have just complicated that by 1000% by forcing them to write HTML.
You don't even need to use your 'Team' ACF field for this section of what I presume is a single page website. Just put the below code into your page template (I'm assuming front-page.php). It will pull the team members directly from the Team plugin shortcode, bypassing ACF all together.
<h2>Core Team</h2>
<div class="container">
<div class="row">
<div class="col">
<?php echo do_shortcode( '[tmm name="8"]' ); ?>
</div>
</div>
</div>
Edited after code example by OP:
<div class="container">
<div class="row text-center">
<div class="col">
<h2>Meet The Team</h2>
</div>
</div>
<div class="row">
<div class="col">
<?php echo do_shortcode( '[tmm name="core-team"]' ); ?>
</div>
</div>
</div>

How to associate a heading/document title with an accordion button

Obligatory 'I have googled but am stuck'. I have a number of documents on a page with associated collapsible 'More Info' accordions. I want to be able to report on when people click to open one of these accordions and what the corresponding document name is.
Implementing tracking in GTM to show opens on the accordions are not a problem, but how do I associate the document name (h4) with the click event?
Div containing document, document heading and associated 'More Info':
enter image description here
Div that the document heading and the more info button are in:
<div class="employee-comms-results-documents">
<div class="row">
<div class="col-md-9 col-sm-8 col-xs-12 no-padding-right no-padding-left">
<div>
<div class="primary-document-meta"><div class="doc-type-pill" id="doc-type-pill-Flyers">Flyers
</div>
</div>
<h4>Helping you save for retirement</h4>
<div class="secondary-document-meta">More info <span class="caret"></span>
</div>
</div>
</div>
Thanks in anticipation!
I think I would need to see the whole site structure to be sure, but for your example I created a JavaScript variable in GTM that returns the corresponding h4-text on click.
This code has worked for me:
function(){
var clickElement = jQuery({{Click Element}}).parent(".secondary-document-meta").parent("div").find("h4").text();
return clickElement;
}

Unable to load the data from other controller

I have a controller, which is composed of many other partial views. I wanted to use a particular section of that controller in another controller. I am able to see the design but unable to load items in it.
Let say I have one controller named "Products" within Product view folder I have _items.cshtml. I wanted to use this _items.cshtml in another controller called "placeTheOrder".
In particular section of div in placeTheOrder view I referred to #Html.Partial("~/Views/Products/_items.cshtml"). Even after doing so it is unable to load the content from _items.cshtml into placeTheOrder.
What am I doing wrong.
_items.cshtml view
<div id="accordionProduct" class="span-6 last prod-acc">
#Html.Partial("~/Views/product/_ezCpSearchBar.cshtml")
<div id="filterPanel" class="span-6 last filter-panel">
<div class="span-6 last">
<div class="filter-panel-head">
<h1>Filter</h1>
</div>
</div>
<div class="span-6 last">
<div class="filter-panel-body">
<div class="filter-panel-prop"></div>
</div>
</div>
</div>
<div id="accordionProductInner" class="span-6 last prod-acc-body">
</div>
</div>
// this is the script are where the content gets loaded into the view
<div id="TemplateFilterItem" class="hidden"></div>
<div id="TemplateLastViewItem" class="hidden"></div>
This is the place where I have refered to it in another controller
<div class="span-6" style="background-color:#d4d4d4;padding:20px;">
#Html.Partial("~/Views/product/_items.cshtml")
</div>
You can use Html.Renderpartial in your view instead
Html.RenderPartial("~/Views/ControllerName/ViewName.cshtml", ModelData);
If you are using different model for both the views then you need to make ViewModel which will include required properties.
Hope this Helps

Wordpress Text editor does not work

I have a problem with my website. I made it with Wordpress ,
everything was Ok but I think that someone tried to hack it today so all contents cannot be displayed .
To explain more when I write some text in text editor it's not showing on the front page of my website ! I don't understand what's the problem how can I solve it ?
http://www.ahlanfoundation.com/about-us/
<p><span class="hide" style="color: #05ac63;"></span></p><h3 class="title bottom-2">من نحن ؟<span class="hide" style="color: #05ac63;"></span></h3><p></p>
<div class="fl-col fl-node-5820d492ec14e fl-col-small" data-node="5820d492ec14e">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-rich-text fl-node-5820d49fbdfa0 fl-animation fl-slide-right fl-animated" data-node="5820d49fbdfa0" data-animation-delay="0.0">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<div id="panel-67-0-0-1" class="so-panel widget widget_sow-editor panel-last-child" data-index="1">
<div id="pg-67-1" class="panel-grid">مؤسسة أهلا للتسويق متخصصــة فــي التسويق الالكتروني نشــأت فكــرة تأسيســها لتكــون مؤسســة طموحــة تســعى لتقديــم حلــول مبتكــرة وابــداع لا محــدود فــي التسويق الالكتروني، وتفخــر المؤسسة بجذورهـا وهويتهـا و يدفعهـا الطمـوح لتوسـيع بـؤرة أعمالهــا . تأسســت أهلا للتسويق عــام 2016 لتصبــح إحــدى المؤسسات للتسويق الالكتروني الرائــدة فــي دول الخليج العربي وتضــع بمتنــاول جميــع العمــلاء خدمــات غيــر مســبوقة لكــي تصنــع الفــرق فــي حملاتهــم الترويجيــة والاعلانيــة لمختلــف أنشــطتهم وتوجهاتهــم . كمــا تضــم مؤسســتنا أفضــل العناصــر البشــرية مــن مختلــف الاختصاصــات لنقــدم خدمــات متميــزة تتماشــى مــع أدق متطلبــات عملائنــا المتغيــرة ســواء كانــت تصاميــم خاصــة أو الخطــط الإعلانيـة والاعلاميـة أو التسويق الالكتروني. نحـن نلتـزم بتقديـم أعلـى معاييـر الجـودة مـع إضافـة لمسـة مـن الابـداع الامحـدود.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fl-col fl-node-5820d492ec19c fl-col-small" data-node="5820d492ec19c"></div>
<p><span class="hide" style="color: #05ac63;"></span></p>
when I try to inspect some elements on the browser I found it hidden.
Assuming you dont have a back up because you wouldent be posting this if you did!
Deactivate all your plugins - install wp theme 2017 - delete your theme - re install your theme (from scratch) and activate your plugins one by one whilst checking the functionality of your theme. Your plugins are prob not the issue.
You can also inspect it in the browser if you can see the first line - double click
<p><span class="hide"
and change it to
<p><span class="show"
Then tap enter!

Resources