Does anyone know how to integrate the new Google Product Reviews with WooCommerce?
Google provide instructions that are below but not sure how this would worth with Woo.
If anyone can point me in the right direction, it would be very much appreciated!!
Add the opt-in code
To give your customers the option of submitting a review of their experience buying from you, add the opt-in module to your order confirmation page.
To add the survey opt-in module to your order confirmation page:
Paste the following HTML snippet into your order confirmation page:
<!-- BEGIN GCR Opt-in Module Code -->
<script src="https://apis.google.com/js/platform.js?onload=renderOptIn"
async defer>
</script>
<script>
window.renderOptIn = function() {
window.gapi.load('surveyoptin', function() {
window.gapi.surveyoptin.render(
{
// REQUIRED
"merchant_id": MERCHANT_ID,
"order_id": "ORDER_ID",
"email": "CUSTOMER_EMAIL",
"delivery_country": "COUNTRY_CODE",
"estimated_delivery_date": "YYYY-MM-DD",
// OPTIONAL
"opt_in_style": "OPT_IN_STYLE"
});
});
}
</script>
<!-- END GCR Opt-in Module Code -->
Place the code just before the closing </BODY> tag. When you place the survey module code with the badge code, the order does not matter: the survey module code can be before or after the badge code.
Related
I use one nuxt instance to serve several domains with different languages. For each domain I use a different Google-Tag-Manager account.
Within nuxtServerInit I add to the store the hostname and also the Google-Tag-Manager ID.
Now I am looking for a way to add the Javascript snippets to my nuxt project.
This one needs to be in the head
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXX);</script>
<!-- End Google Tag Manager -->
And that one at the beginning of the body
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
My first idea is it to add this code programmatically to the document, but I don't know how.
Any suggestions or better idea to accomplish this?
I already tried to use the community solution. But it does not support different ID's.
Can anyone help implementing Nuxt.js Google Tag Manager with function based id
The main problem of this solution is the module which is used itself. A module is only called once but it needed to be something else to be called on each request.
This question is similar and helped me find the answer to this one.
Create a new plugin at plugins/gtm.js (or whatever you want to name it):
// plugins/gtm.js
let gtmKey;
// In this example I care about the page title but you can use other properties if you'd like
switch(document.title) {
case 'Title 1':
gtmKey = 'GTM-XXXXXX1';
break;
case 'Title 2':
gtmKey = 'GTM-XXXXXX2';
break;
default:
break;
}
export default () => {
if (!gtmKey) { // In case I have other pages not in the switch statement above
return;
}
/*
** Include Google Tag Manager
*/
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', gtmKey);
}
Then load it in from nuxt.config.js:
// nuxt.config.js
export default {
...
plugins: [{ src: '~/plugins/gtm.js', mode: 'client' }],
...
}
Note 1: I don't really like how I've hardcoded the titles into this plugin since an update of the title on one of my pages could break this without me knowing. Suggestions here are welcome.
Note 2: My eslint was complaining about no semicolon before the core GTM closure (just before the (function...) so I actually just disabled eslint for this whole file with // eslint-disable. You could just disable it for the line.
I have never used MailChimp Easy Forms before. I'm trying to make the pop-up apear when a user pressing a button instead of the pop-up to just showing when the user gets to the website.
My js code:
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup- forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script>
function showMailingPopUp() {
alert('inside the button click');
require(["mojo/signup-forms/Loader"], function (L) {
L.start({
"baseUrl": "mc.us1.list-manage.com", "uuid": "81016de6debaf524b31df317af5480b1-us17",
"lid": "8517f84634"
})
})
document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
}
</script>
And the HTML:
<button id="open-popup" onclick ="showMailingPopUp();">Email signing</button>
In the inspection tool I get this error:
This is how it looks in MailChimp:
Currently i'm using the listid from MailChimp as "lid" and my API-key as "uuid" and I think it's the uuid that break, but what is the uuid? If it's not the id's thats wrong what is it then?
Thanks in advance :-)
Install Easy Forms for MailChimp WordPress Plugin and set the mailchimp API key and it will fetch all of your list now create new form and assign list with it then save it one shortcode will generate.
Now open one pop up using jquery and in content paste the shortcode then it will work.
https://wordpress.org/plugins/yikes-inc-easy-mailchimp-extender/
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>
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.
I am using shopify,
I send user to shopify with certain product number and quantity, which is being populated with price on shopify where user can make a payment,
Now i want the user to be redirected to a certian page in my website, after successful payment,
I created webhook order payemnt and given the url of the page to be redirected after payment, but it is not working
Please suggest
Thanks
You could set up a redirect by visiting Settings > Checkout and pasting this into the text box for Additional content & scripts.
<style type="text/css">body {display:none}</style>
<script type="text/javascript">
window.location.replace("http://yahoo.com");
</script>
If you are looking to redirect a customer to a different URL depending on the product they purchased, then here is some code I created to do that.
NOTE: This code is inserted into the Additional Scripts section of the Checkout area. To go there go to Settings > Checkout > scroll down to Additional Scripts.
This solutions uses the Shopify checkout object selector #Altin provided.
Keep in mind, this solution works uniquely for my Shopify experience because customers can only buy 1 product at a time. If your customers can add multiple items to their carts, than a for loop should be used, likely around the for in loop.
<script>
const idUrlList = {
// Replace the content below here with your own
"product1": {
"url": "https://www.URL-HERE.com",
"product_id": 1234567898765,
},
"product2": {
"url": "https://www.URL-HERE.com",
"product_id": 1234567898765,
},
"product3": {
"url": "https://www.URL-HERE.com",
"product_id": 1234567898765,
},
"product4": {
"url": "https://www.URL-HERE.com",
"product_id": 1234567898765,
},
// Replace the content above here with your own
};
// Do NOT change anything below this line
const productPurchasedId = Shopify.checkout.line_items[0].product_id;
for (const product in idUrlList) {
if (idUrlList[product].product_id === productPurchasedId) {
window.location.replace(`${idUrlList[product].url}`);
}
else {
console.log(`Found no matches in dictionary.
The dictionary ID is ${idUrlList[product].product_id}
The product ID is ${productPurchasedId}`);
};
};
</script>
To make this work for you, make the following replacements:
Replace "product1" with the name of the product or redirect that you will find memorable. For example, in one of mine I wrote "20_off_2020".
Replace https://www.URL-HERE.com with the link you want people to go to. For example, https://theamsalems.com/
Replace 1234567898765 with the unique product ID that you want to check for. This can be found in Shopify. Go to Products, click on a product, and grabbing the string of numbers at the end of the URL.
Add/remove the other products depending on how many products you have. For example, if you only have two products, remove the code from "product3" all the way up to the line which says // Replace the content above here with your own.
The rest of this code will automatically handle finding product IDs and handling their correct redirects.
Here are some of my references to building this solution:
Shopify checkout object, line_items array
Line items product ID
I also found out you can test your pages using a Bogus Gateway. Shopify documentation available here.