What I'm trying to do: Create an email campaign that will have a header image which will be personalized and display the viewers name based on FirstName data.
This may be beyond my current skill level. But I'm wondering if there isn't a service or some kind of library that will do this. I'm thinking what needs to happen is that an image needs to be served somehow that when pinged with a request like http://example.com/images/emailheader?Ralph, would serve an image with Ralph's name in it.
If this were just for the web, that would be easy. I'm not able to wrap my head around how I might do this for email however, and I'm not finding much in the search.
If you have the ability to http://example.com/images/emailheader?Ralph you have the ability to do this with names. You'll just have to do the fancy logic on the web site.
Lets use http://placekitten.com as an example because I'd rather look at kittens.
If http://placekitten.com can serve a 640x480 image of a kitten, you can serve an image for a guy named Ralph. Lets say the first name of your email target is 600/480. You would code in: http://placekitten.com/. This will give you an image named http://placekitten.com/600/480.
It would look something like this:
<p>Dear <firstname>,</p>
<p>We saw this and thought of you.</p>
<img src="http://placekitten.com/<firstname>" width="600" height="480" alt="<firstname>" style="display:block;"/>
<p>Your friends at StackOverflow.</p>
Your email ISP will take , convert it to good old 600/480, and you'd get this:
<p>Dear 600/480,</p>
<p>We saw this and thought of you.</p>
<img src="http://placekitten.com/600/480" width="600" height="480" alt="600/480" style="display:block;"/>
<p>Your friends at StackOverflow.</p>
Assuming you did your configuration on your web site for everyone named Ralph, gwally or 600/480, those images will show up in their email. There's far more to it than this, but it gets you started.
Good luck.
I have a website that I am using the new Universal Analytics (analytics.js) to track. Everything is setup and working (pageviews, referrals, etc.) using the following code snippet:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-39570713-1', 'site.com');
ga('send', 'pageview');
</script>
That is located before the </head> tag.
I am using JQuery to fire off an event. I tested the JQuery with an alert message and it is getting called, so that isn't the problem. Here is the snippet that fires when a button is clicked:
$('#submitButton').on('click', function() {
ga('send', 'event', 'button', 'click', 'contact form');
});
Nothing is appearing in the Events section of Analytics. I keep clicking the button, even from different computers just to make sure it isn't excluding my IP address. Because the Analytics doc that Google provides does not provide a whole lot of explanation I'm at a loss here.
If you are using Google Tag Manager and also want to trigger some events via code, ga('send'...) does not appear to be enough. You need to first fetch the appropriate analytics object:
if ("ga" in window) {
tracker = ga.getAll()[0];
if (tracker)
tracker.send("event", "Test", "Test GA");
}
Note that this assumes you're only using a single Google Analytics Tracking code on your site. If you happen to be using multiple, you may need to fetch the appropriate one by name or index.
New version of analytics has a new syntax. Replace the line below;
ga('send', 'event', 'button', 'click', 'contact form');
with this;
gtag('event', 'click', {'event_category' : 'button',
'event_label' : 'contact form'});
Reference;
https://developers.google.com/analytics/devguides/collection/gtagjs/events
For testing purposes you could also use the hitCallback method:
ga('send', {
'hitType': 'event',
'eventCategory': 'button',
'eventAction': 'click',
'eventLabel': 'contact form',
'hitCallback' : function () {
alert("Event received");
}
});
Update: comma was missing.
For GA for this moment...
Sending a new page in SPA looks finally like this for me:
if (window.ga){
window.ga.getAll()[0].set('page', location);
window.ga.getAll()[0].send('pageview')
}
This shows exactly what wanted on GA reports like a new page is hit and the title and all are correct.
In my case the problem was uBlock Origin that was blocking the analytics script from loading.
I had the exact same problem. I had to create a new property and select "Universal Analytics" instead of "Classic Analytics" (it is labeled as "beta"). Now events are captured properly.
I had this same problem, and I think I've found the solution, but it really leaves a bad taste in my mouth about Universal Analytics.
What I had to do was explicitly use the synchronous analytics API. So instead of including the usual snippet in your <head> tag, use the following code:
<script src="//www.google-analytics.com/analytics.js"></script>
<script>
tracker = ga.create('UA-XXXXXXX-1', 'example.com');
tracker.send('pageview');
</script>
Then you call the event tracking code like this:
tracker.send('event', 'Category', 'Action', 'Label');
This will ensure that the tracking beacon is sent to Google and acknowledged before the page the user navigated to starts loading.
This suggests that Universal Analytics requires some kind of additional acknowledgment beyond what the old ga.js analytics code required. So when you attach an event to a click that brings the user to another page, that acknowledgement can't be sent because the browser has left the page and dropped the current javascript execution stack.
Maybe this problem is specific to certain execution environments (I'm using Chrome 34 on OSX Mountain Lion), which might explain why more developers aren't noticing this problem.
today I needed to setup analythics for the first time and I found myself in the same trouble.
I found that the bast way to deal with the multiple trackers to avoid the getAll(), is this:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxx-y', 'auto', 'tracker');
ga('tracker.send', 'pageview');
ga('tracker.send', 'event', 'test', 'click', 'automaticEvent')
Note that you have to pass a "name" to the create method, and then you send an event to that tracker with ga([trackerName].send, ...)
Reference: https://developers.google.com/analytics/devguides/collection/analyticsjs/accessing-trackers
If anyone is trying to send an event to Google Analytics and wondering why the send function is doing nothing without any clear hint, I recommend using the debug version of their library. It will log some useful hints in the browser console.
Instead of getting the script from https://www.google-analytics.com/analytics.js, get it from https://www.google-analytics.com/analytics_debug.js. I found this out from their documentation.
I cannot see anything wrong with the code itself. Have you tried using the alternative event tracking?
ga('send', {
'hitType': 'event', // Required.
'eventCategory': 'button', // Required.
'eventAction': 'click', // Required.
'eventLabel': 'contact form'
});
I would also suggest testing the website with GA Debug Chrome addon, which allows you to see the tracking beacon was sent or not.
"Official" debugging documentation for Universal Analytics is still missing as of now, but hopefully it will be added soon as ga_debug.js provides lot of useful ways how to find out what's wrong with Analytics implementation...
I have the same problem, and it looks like events are tracked, but GA dashboard doesn't allow to browse them. This is the only way how I could interprete the "Visits with events: 1071" but "Total events: 0" that GA dashboard shows me.
UPD: With GA Chrome debug, have found a problem; 1st method is not working (sends the event without any data attached), but the 2nd one is OK.
You should also consider that it is likely that the page gets reloaded after the submit event was fired before the ga script was able to execute the 'send' method. To avoid this you could employ the 'hitCallback' mechanism, i.e. prevent the submit, call the ga send-method and submit the form data in the callback.
I got it working - my example is using the new Universal Analytics.
<script type="text/javascript">
function sliderOnChange() {
var period = window.convertDays(($("#PeriodSlider").slider("value")));
var amount_of_credit = $("#AmountOfCreditSlider").slider("value");
var gaEventInput = "£" + amount_of_credit + " for " + period;
ga('send', 'event', 'slider', 'sliding', gaEventInput);
}
</script>
Make sure Google Analytics / Google Tag Manager filters are not excluding any traffic from different domain. (Maybe you are testing it to get this working using different domain)
Recheck your GA id and domain in ga('create', 'UA-39570713-1', 'site.com');
Create a new profile in Google Analytics (GA) for testing purposes and debug your html in the same domain you define in GA.
Change the date to be today in GA - you might also need to wait some time before it appears in GA
I recommend sending GTM event via window.dataLayer.push({ event: 'EVENT_NAME', ...data }) and in GTM creating a trigger to fire a tag which sends event to Google Analytics. You'll have the best debugging experience with GTM preview and you'll be sure that events will be sent from GTM to GA, because GTM takes care of that.
onclick ga() function not working for me, I have also added the 'analytics.js' in <head> section -
<a mat-list-item routerLink='/dashboard' onclick="ga('send', 'event', 'Dashboard', 'Click', 'demoClick, 30);">
<mat-icon color="accent">home</mat-icon>
<span class="side-item">Dashboard</span>
</a>
gtag() function working fine for me, only the 'gtag.js' added in <head> section, 'analytics.js' not required or can be removed -
<a mat-list-item routerLink='/dashboard' id="sideNavDashboard" onclick="gtag('event', 'Click', {'event_category':'Dashboard', 'event_label':'demoClick', 'value':'30'});">
<mat-icon color="accent">home</mat-icon>
<span class="side-item">Dashboard</span>
</a>
Result (Google Analytics output) -
I was seeing everything except Events (both real-time and report). My steps included:
Calling Google and they found out that my GTM tag for Google Optimize was stopping all events to be sent to Analytics.
Removed the Optimize tag from Google tag manager and events started popping up in Analytics.
Try pausing some tag if you have this issue. Also connect the event tag to some goal.
I am using Vue.js and it seems I have to create ga each time, even though it was already created on the window:
ga('create', yourGtagId, 'auto');
ga('send', {});
In my case it didn't work because I loaded the HTML file directly from the file system.
Loading the page via a web server did the trick.
For local development a tool like https://github.com/tj/serve does a great job.
The only way I solved the problem was rolling back to the previous version of Analytics (non-beta):
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-39570713-2']);
_gaq.push(['_setDomainName', 'optimino.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
You can also use a jquery plugin I wrote for the new Universal Analytics:
https://github.com/pascalvgemert/jquery-analytics-event-tracking
Rather than add Pin It buttons through our site, I would like to simply control what images show up in Pinterest's "Find Image" results if a user decides to pin one of our URLs.
As of now, "Find Images" allows the user to scroll through the images it finds on the page so they can select which image to pin. The "found" images start with the first jpg in the html file, I'm assuming (could that be a bad assumption??). On our site, this forces a user to scroll through about 15 navigation and promotion images before arriving at the featured product image. Is there any way to specify this image to show first in those results? Maybe through a meta tag, or by adding a class or id to the element?
Without a public Pinterest API, this seems like just guesswork, but I wanted to see if anyone else has run into this, or solved this. Thanks.
A lot of search results including the Pinterest Help Center talk about using nopin in HTML elements, which is invalid HTML. What they don't document is a data attribute to the same (well formed) effect.
<img src="foobar" data-pin-nopin="true" />
Adding the nopin attribute will exclude the image from appearing on Pinterest:
<img src="..." nopin>
I solved this by simply loading the image before all others in the page. In this case, I gave it width="0" and height="0" (you could also give it style="position: absolute; left: -9999px; top: 0;" just to be sure).
This won't break the page layout, but will force Pinterest to find this image first. The only downside is that the browser will load the page a few milliseconds slower, but if you're reusing this image later in the page anyway, you should make up for lost time then.
Pinterest will find any images from <img> tags (it will ignore CSS background images) that are at least 80px x 80px.
The order the images show up on in the Pinterest list is determined by the order they are specified in the HTML.
As you have discovered, you can alter the CSS of an image to "hide it" without actually hiding it by either moving it off the page with absolute positioning or 0 height and width. Any images that are set to display: none will not be picked up by Pinterest.
You can instruct the share preview to only grab specific images from the page by using the “image_include” configuration option. First, set image_include to your desired class name (id selectors are not allowed, only class selectors), then add that same class name to each of the images on the page that should be grabbed. For image_include, don’t add the ‘.’ selector. Here’s an example:
<script type="text/javascript">
var addthis_config = {
image_include: "at_include"
}
</script>
Once image_include has been defined with a class, add that class to the desired images on the page. In this example, the only images on the page that will be grabbed, will be the images with the at_include class (img1.jpg and img3.jpg).
<img src="http://www.example.com/img1.jpg" class="at_include" />
<img src="http://www.example.com/img2.jpg" />
<img src="http://www.example.com/img3.jpg" class="at_include" />
I was reading this blog which suggests the following:
Use the global no pin flag to prevent pinning on the whole site
Manually add the Pin It widget to those images you want to make pin-able.
Given Pinterest's webmaster tools appear to only have a blacklist, rather than a whitelist option (that you are seeking), this could be a possible solution. Another stated benefit of this is you can also supply suggested pin text through the Pin It widget.
Only downside to this I guess is that it may break the user's own Pin tools. Pinterest does allow you to supply a custom "denied" message, so I guess you can say "please use our site's pin buttons directly".
I've tried this, and it works. It seems like a decent approach, at least until Pinterest sees fit to add some better tools, such as an image whitelist option. The main drawback is needing to add Pin-it buttons on every image you want to enable for your users & your users may be annoyed that they can't pin anything.
Unfortunately, there is no way to mark several images on your page as preferred, but you can mark one image to stay at the top of your images when someone pin it. Specify this meta-tag in <head>:
<meta property="og:image" content="http://YOUR-DOMAIN.com/IMAGE.jpg"/>
I have not found official confirmation for this feature, but it works great with addthis sharing plugin.
Add this script before the actual call to pinterest. And set images that you do not want to show with a class called 'nopin'
<script type="text/javascript">
var addthis_config =
{
image_exclude:'nopin'
}
</script>
<div id="toolbox" class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_pinterest"></a>
</div>
</div>
If anyone is using AddThis, please check this thread: http://support.addthis.com/customer/portal/questions/1570789
AddThis has some, uh, unique functionality that affects the image picker presented. As in, when there is only one image on the page, it ignores the defined og:image.
If you set that lone image to be excluded, then the image picker won't show any images for selection.
My brand new job is full of wonderful and awful surprises. one of the most interesting part of this job is the will to enhance, accelerate, make everything scale.
And today, first real problem.
Here's the deal : we get up to 20 list elements, each one of them displaying its own Facebook share, Twitter share, and Facebook Like button.
As you can imagine, 60 iframes opening is just a pain for user experience.
My question : anybody has already been facing such problems, and what would you recommend to upscale these performance issues ?
While I'm thinking of an AddThis implementation, I hope there are other solutions I could consider.
Best way to improve performance is not to copy paste the code from facebook plugins.
Facebook 'Like Button' code looks like:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&xfbml=1"></script>
<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>
Issue with this is, if you have 20 like buttons, then 20 Divs are created with id="fb-root" and 20 times the script for all.js is called. Best way is to move the
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&xfbml=1"></script>
to header of page and whenever you want a like button, only use
<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>
Same goes for facebook comments & other plugins.
Also, foir some plugins facebook provides option to either use xfmbl or iframe code. Always pick the iframe code because facebook's js has to parse all xfbml code and convert to iframe. It causes a lot of DOM insertions and slows down the page.
Hope this helps!