Wordpress ACF google map not working - wordpress

I tried to add google map field in ACF, but when I try to edit or add new article it show the map for sec and then diable it and wrtie:
Oops! Something went wrong. This page didn't load Google Maps
correctly. See the JavaScript console for technical details.
What can be the problem? How can I fix it...?

as said here : https://www.advancedcustomfields.com/resources/google-map/
It may be necessary to register a Google API key in order to allow the Google API to load correctly. Please follow this link to get a Google API key.
To register your Google API key, please use the ‘acf/fields/google_map/api’ filter like so in your function.php :
function my_acf_google_map_api( $api ){
$api['key'] = 'xxx';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

add this code in your script..replace with your key..
<script src="javascripts/jquery.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>
<script type="text/javascript" src="javascripts/jquery.googlemap.js"></script>

Related

How to add a separate Analytics for each website page in Wordpress

We have a WordPress installation that has locations as separate pages.
For example: mysite.com/colorado and mysite.com/alabama
We need separate google analytics for each of these as well as 1 for all of mysite.com.
Is there a way to do this with a WordPress plugin(s) or will we need to hand code some things?
Thanks in advance!
If I'm not mistaken, Google Analytics lets you view your analytics in a breakdown like that. That said, if you do need individual scripts, it would be relatively easy to program in. There may be some plugins that do this, but I'm not aware of any in particular, though a cursory glance showed plugins like Header and Footer Scripts that allow you to add scripts on a page by page basis.
Some themes also allow you to add SEO/Script settings per page/post. If that's the case, you can just open up each page and dump each script tag in the "header scripts" or similar section, and call it good. (Genesis is an example of a theme that does this).
If not, programming this would be relatively straight forward. I'd do it something like this:
add_action( 'wp_head', 'display_analytics_by_page', 1 );
function display_analytics_by_page(){
// Default Script Code with individual UA codes replaced
$script = '<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=[UA-CODE]"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(\'js\', new Date());
gtag(\'config\', \'[UA-CODE]\');
</script>';
// Array of UA codes by state
$codes = array(
'Alabama' => 'UA-123456789-1',
'Oregon' => 'UA-987654542-3',
'Vermont' => 'UA-000000000-0'
);
// Get title of this page
$title = get_the_title();
// If this page title exists in the codes array, swap placeholder and echo it.
if( isset($codes[$title]) ){
echo str_replace( '[UA-CODE]', $codes[$title], $script );
}
}
I commented along the way, but the gist is to put in the "default" script, but pull out the UA code. This will only work if you need the same exact script code in each one, otherwise you'll have to add each script to the $codes array instead.
Then create an array of the UA Codes (or full scripts if needed), keyed by the page title.
Then check the page title, and if that exists, pull that code in and echo it. This is run on the wp_head hook, so you just need to put this code in your functions.php (or similar) file.
If you want to go easy with no-coding, then go with a plugin. Jump to Plugins > Add New and Search for Google Analytics in the search box. Install the plugin named Google Analytics for WordPress (Formerly GADWP). Activate and connect the plugin with your Google Analytics property. When all is done, you will see a new tab beside your post's title. See a screenshot here.
And if you want the net analytics for the whole web site then head to your admin dashboard. A new widget will appear there with the analytics.
Documentation for the plugin can be found here.
I hope it helps.
I'm curious why you need a separate GA account for all the locations? Common practice in this scenario would be:
Use 1 account
Create 1 GA view for the entire domain
Create +1 view for each location by filtering traffic based on the URL
If the different accounts are related to limiting user access, know that you can grant user access based on each property view.

Add meta tags in GTM (JavaScript code) for Search Console Verification

I want to try to pass verification in a non-standard way. Add meta tags <meta name="google-site-verification" content="G3zZVDOhDEIQRfF2ndWT7icRgZn7YZtEORo1fAbsnY4" /> how JavaScript code in GTM (Custom HTML Tag):
<script>
var meta = document.createElement('meta');
meta.setAttribute('name', 'google-site-verification');
meta.setAttribute('content', 'G3zZVDOhDEIQRfF2ndWT7icRgZn7YZtEORo1fAbsnY4');
document.getElementsByTagName('head')[0].appendChild(meta);
</script>
But for some reason, in this way, it does not create a meta tag, and Search Console does not allow verification. You can’t do this? And Yandex.Webmaster too
Thanks
Use the GTM snippet method to verify instead: https://support.google.com/webmasters/answer/9008080?hl=en&visit_id=637051133309494101-3963396650&rd=1#verification_details
If you installed GTM correctly as per spec, you shouldn't need to do anything or add any tags.

How to send traidtional GA event in GTM's custom HTML tag

I'm using GTM in my company's online shop, and I installed some other tag via GTM's custom HTML tag, like this:
<script>
//some JS code...
var customParam=[{"key":"value"}];
var jsElm=document.createElement("script");
jsElm.type="text/javascript";
jsElm.async=true;
jsElm.src="https://some_tags.com/tag.js?s=CV";
document.body.appendChild(jsElm);
if(today < some date)
{
SEND GA EVENT here.....
}
</script>
The traditional GA event script
ga('send', 'event', 'XXX', 'pageview', 'some description', 1);
isn't working anymore here.
How do I did this ?
And I heard someone said that I should put data into DataLayer and do some bla bla bla... but I was understanding that too few to try. Is that a right way ?
I am going to answer with another question. Why are you sending events through HTML tags instead of Google Analytics Tag that are build just for that purpose?
I ll work with the assumption that you are new with this tool but the idea is that GTM replaces all old GA code on site.
Just create a new Tag and select 'Universal Analytics' and after that you can choose which kind of information you want on Google Analytics.
Its pretty self explanatory as a tool so i strongly recommend you to forget about those old GA codes and work with what you got.
In addition to this have in mind that you can use custom javascript variables to scrap DOM values in case you need to.
Here is our guru Simo Ahava: https://www.simoahava.com/
If you need anything else just ask.

wordpress advanced custom fields google map api key

I have a problem with loading google map with the Advanced Custom Field plugin. I make everything like in the instruction on the plugin page here https://www.advancedcustomfields.com/resources/google-map.
I add google-map field in ACF, but on the page where it should be it appears for a second, and then disappears with the inscription "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details." (see the screenshot). Console says that I need to set the Google API key. I guess I also need to modify some strings in .js file from the ACF instruction, but I don't know which ones. May be someone could help.
Thank you in advance.
screenshot
ACF updated the Google Map documentation
You first have to get a Maps API key and make sure you activate the following APIs :
Maps JavaScript API
Geocoding API
Places API
Then register the API key in your functions.php
If using ACF free
function my_acf_google_map_api( $api ){
$api['key'] = 'xxx';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
If using ACF pro
function my_acf_init() {
acf_update_setting('google_api_key', 'xxx');
}
add_action('acf/init', 'my_acf_init');
In my case I had to delete & recreate the field so that it saves correctly.
A solution could be editing the functions.php in your template
//TODO: fix api key for advanced custom field
add_action('acf/fields/google_map/api', function($api){
$api['key'] = '<YOUR_API_KEY>';
return $api;
});
or you can check my article for a complete solution
add this line in your script..replace with your key..
<script src="javascripts/jquery.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>
<script type="text/javascript" src="javascripts/jquery.googlemap.js"></script>
I have found a couple of different solutions for this issue, but before starting to explain what to do let me remember to you to get a google maps api key.
I followed these instructions because I'm using Listify theme, but I'm pretty sure they can help you regardless the theme you have.
Here my solutions:
frontend
Somewhere (I guess in your functions.php or in your-awesome-widget.php) you should have a line like these
wp_enqueue_script( 'googlemaps_api' );
or
wp_enqueue_script( 'googlemaps' );
the solution I've found is add the key in the script registration before enqueuing it, in this way
wp_register_script('googlemaps', 'http://maps.googleapis.com/maps/api/js?key='.$YOUR_API_KEY, false, '3');
wp_enqueue_script('googlemaps');
Backend
This one is quick and totally dirty because I've read that ACF support is already working on the official solution, so, for me, is not a problem if it will be erased by a plugin update.
Open those two files:
advanced-custom-fields/js/input.min.js
advanced-custom-fields/js/input.js (in theory if you are using the .min version this one is useless)
This piece of code is repeated twice in each file:
google.load('maps', '3', { other_params: $.param(self.api), callback: function(){ ...
change those two occurencies adding the key as querystring, in this way
other_params: $.param(i.api) + 'key=YOUR_API_KEY', callback ...
Et voilá! It should work.
The official page about the topic is here
I hope to have been helpful!
With the current version (4.4) of ACF, you can find functions.php in the template you are using and add this to the end of the code:
function my_acf_google_map_api( $api ){
$api['key'] = 'YOUR_API_KEY';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
Change 'YOUR_API_KEY' to your API KEY generated from Google.

inserting google 'onclick' tracking link attribute in wordpress

I am looking for a way to modify the links on my Wordpress site so it tracks all my 3rd party links.
I was able to find some help with the, how to create the correct tracking code in Google Analytics, but the second part of the process is to add some specific link attributes.
Here is the example which they suggest I replicate:
<'a href="www.blog-hosting-service.com/myBlog" onclick="_gaq.push(['_link', 'www.blog-hosting-service.com/myBlog']); return false;">View My Blog
Does anyone know where I can insert this code link attributes so I can collect the external clicks via Google Analytics?
JQuery would be the best way in my opinion.
// start by getting the current page path (the one you are sending to tracker)
var pathname = window.location.pathname;
// ready handler to change the links on hosts not equal to location host
$(document).ready(function() {
$('a[href^="http://"]').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).click(function(e) {
_gaq.push(['_link', pathname]);
});
});

Resources