Trigger Marketo Lightbox on buttonclick - marketo

The code that Marketo provided us with currently launches a lightbox on page load, but we would like the lightbox to be triggered when a button is clicked.
We would very much appreciate being pointed in the correction direction on how to go about achieving this. I have looked though the Marketo Developer documentation, and through stackoverflow questions tagged 'Marketo' but have been unsuccessful finding an example of how to do this.
Here is the code Marketo has provided us with. I have removed unique identifying numbers like Munkin and formId.
<script src="//app-ab02.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_number"></form>
<script>MktoForms2.loadForm("//app-ab02.marketo.com", "number", number, function (form){MktoForms2.lightbox(form).show();});</script>

Try this
Put your form anywhere on the page
<script src="//app-ab02.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_number"></form>
Then
<script type="text/javascript">
$("#popup-link").click(function(e){
e.preventDefault();
MktoForms2.loadForm("//app-sjh.marketo.com", "mktoForm_ID", "mktoForm_number", function (form){MktoForms2.lightbox(form).show();
// Hide the form and display a thank you message
form.onSuccess(function(form){
formElem = this.formElem[0];
formParent = formElem.parentNode;
formParent.removeChild(formElem);
formParent.innerHTML = '<h3>Thank you!</h3>';
});
});
});
</script>

Related

Yandex metrika tag slowing down site speeds google page speed isights reporting

So on all my web pages i have this code what is used by Yandex metrika for analytics. According to google this script is slowing down my pages and needs something changing in the way it loads to not be render blocking, TTI time to input blocking, FID first input delay blocking, First contentful paint blocking.
<script data-cfasync="false" type="text/javascript">
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(XXXXXXXX, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
</script>
Googles page speed reports the following
https://developers.google.com/speed/pagespeed/insights/
What can i modify the Yandex metrika javascript to in order to fix this issue ?
You don't have many options I am afraid as it is a third party script.
One option to improve your score and perceived load times is to wrap the call to the function in a setTimeout set long enough to delay loading the script until the essential content is loaded.
<script data-cfasync="false" type="text/javascript">
setTimeout(function(){
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(XXXXXXXX, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
}, 5000); //set this as high as you can without ruining your stats.
</script>
This is definitely a workaround and I would instead advise using a different library that is less bloated if you can find one.
<script data-cfasync="false" type="text/javascript">
(function(){
var a = function() {try{return !!window.addEventListener} catch(e) {return !1} },
b = function(b, c) {a() ? document.addEventListener("load", b, c) : document.attachEvent("onreadystatechange", b)};
b(function(){
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(XXXXXXXX, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
}, false);
})();
</script>
One option is to use old Yandex Metrika code (new Ya.Metrika...).
You can view the old code if you set checkbox in advanced settings of the Metrika. Old code has some limitation but it's much smaller and few times faster.
Disabling clickmap and webvisor could help.

How to display Woocommerce Product gallery image in collapsible

I have setup woocommerce store. In my store every product have more then 16 gallery images.
So i want to show first 8 gallery images then below show one link "See more sample configuration" on click collapsible event work and then below show another 8 gallery images. See this screen shot -> http://nimb.ws/2buKoh
For this my requirements i do research on google but can't find any solutions. So any one know solutions then please help me.
Thanks,
Ketan.
You can try this jquery code.You need to add this jQuery into your theme option of bellow the wp_footer() in footer.php
<script type="application/javascript">
jQuery(document).ready(function () {
jQuery('.images').append('<div id="loadMore">See more sample configuration</div><div id="showLess">Hide</div>');
jQuery(".thumbnails a").hide();
size_li = jQuery(".thumbnails a").size();
x=3;
jQuery('.thumbnails a:lt('+x+')').show();
jQuery('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+3 : size_li;
jQuery('.thumbnails a:lt('+x+')').show();
});
jQuery('#showLess').click(function () {
x=(x-5<0) ? 3 : x-3;
jQuery('.thumbnails a').not(':lt('+x+')').hide();
});
});
</script>
after added the code, go to your product page and click on See more sample configuration.Try this then let me know the result.
Thanks

How can I tell if my Google content experiment is running?

I've created a google content experiment without redirects using the docs.
The basic implementation involves a javascript snippet that uses the following code to choose the version of the experiment:
<!-- Load the Content Experiment JavaScript API client for the experiment -->
<script src="//www.google-analytics.com/cx/api.js?experiment=YOUR_EXPERIMENT_ID"></script>
<script>
// Ask Google Analytics which variation to show the user.
var chosenVariation = cxApi.chooseVariation();
</script>
<!-- Load the JQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
// Define JavaScript for each page variation of this experiment.
var pageVariations = [
function() {}, // Original: Do nothing. This will render the default HTML.
function() { // Variation 1: Banner Image
document.getElementById('banner').src = 'bay-bridge.jpg';
},
function() { // Variation 2: Sub-heading Text
document.getElementById('heading').innerHTML = 'Look, a Bridge!';
},
function() { // Variation 3: Button Text
document.getElementById('button').innerHTML = 'Learn more';
},
function() { // Variation 4: Button Color
document.getElementById('button').className = 'button button-blue';
}
];
// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(
// Execute the chosen view
pageVariations[chosenVariation]
);
</script>
However, when I visit the page using an incognito window, I only see the first variation of the experiment. When I check chosenVariation in the console, it's always 0. In fact, when I call cxApi.chooseVariation(); in the console, it always returns 0.
Is this because google recognizes my incognito browser windows, or is something broken with cxApi.chooseVariation(); or in my implementation?
I had the same problem, 100% of the sessions were given the original (0) variation. In order to fix the problem, I added the javascript code provided by the experiment. Go to your experiment (edit), click Setting up your experiment code, manually insert the code, copy the code in there.
Now since you (and I) don't want to have a redirect, remove this part at the end of the code <script>utmx('url','A/B');</script>. If your page is templated, you can use a variable and insert your experiment key (not experiment id) where you see var k='########-#'
Now either very few people use the experiments in a client-only fashion or we're totally stupid because it would seem to me that the guide is wrong and there's absolutely no documentation that shows a working client-only setup.

Callback in Twitter widget

Does anyone know how to include a callback in this Twitter widget? Any input would be much appreciated.
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); </script>
Twitter’s widgets JavaScript fires events on initialization and after a viewer interacts with a widget: https://dev.twitter.com/web/javascript/events.
You have to load the javascript yourself in the <head> of your page:
<script src="http://platform.twitter.com/widgets.js" id="twitter-wjs"></script>
Then add some Javascript, like:
twttr.ready(function (twttr) {
twttr.events.bind(
'rendered',
function (ev) {
// callback code
});
});
You can see an example at the end of this JS and the result on the "GET THE DIRECT" section of this page

How Can I Create a Button that links to multiple websites randomly?

I just wanted to know how can I create a button that can take a person to multiple websites in a random order when it is clicked each time. I do not want these websites to open all at once, only one at a time. I'm looking for something similar to the "stumble" button that is used on StumbleUpon. I plan on using this button for a toolbar that I'm planning to create so if anyone here can answer this question I'd greatly appreciate it. Thanks!
Make a JS array with the target URLs, and randomly pick from it when the button is clicked.
Here is a working example:
<script type="text/javascript">
var urls = [
"http://www.kittenwar.com/",
'http://heeeeeeeey.com/',
'http://eelslap.com/',
'http://www.staggeringbeauty.com/',
'http://www.omfgdogs.com/',
'http://burymewithmymoney.com/',
'http://www.fallingfalling.com/',
'http://ducksarethebest.com/',
'http://www.republiquedesmangues.fr/',
'http://www.trypap.com/',
'http://www.hristu.net/',
'http://www.partridgegetslucky.com/',
'http://www.rrrgggbbb.com/',
'http://www.sanger.dk/',
'http://www.geodu.de/',
'http://beesbeesbees.com/',
'http://breakglasstosoundalarm.com/',
'http://www.koalastothemax.com/',
'http://grandpanoclothes.com/',
'http://www.everydayim.com/',
'http://www.haneke.net/',
'http://instantostrich.com/',
'http://r33b.net/',
'http://cat-bounce.com/'
];
function goSomewhere() {
var url = urls[Math.floor(Math.random()*urls.length)];
window.location = url; // redirect
}
</script>
And here is a link with this onClick handler assigned.
Gimme something weird!
You can style it to look like a button, if you want.
Just FYI the crazy links come from TheUselessWeb's list.

Resources