I want to track email newsletter especially with piwik.
Now there's the following image tracking code given (source):
<!-- Piwik Image Tracker -->
<img src="http://analytics.mysite.net/piwik.php?idsite={$IDSITE}amp;rec=1" style="border:0" alt="" />
<!-- End Piwik -->
I want to add something like _rcn to attach a campaign, to assign the email opening.
The code could look like that (web beacon):
<img src="http://analytics.mysite.net/piwik.php?idsite=1&rec=1&_rcn=mycampaign" style="border: 0; display: none; width: 0px; height: 0px; margin: 0;padding: 0" alt="" />
But that doesn't work... Any Ideas?
Finally I found something. My first attempt was right xD
<!-- Piwik Image Tracker -->
<img src="http://analytics.mysite.net/piwik.php?idsite={$IDSITE}&action_name=test&_rcn=testcampaign&rec=1" style="border:0" alt="" />
<!-- End Piwik -->
Thats working o.O
Just set {$IDSITE} to your site id, for example: 1
Parameters:
rec – (required) The parameter &rec=1 is required to force the request to be recorded
idsite – (required) Defines the Website ID being tracked
_rcn - the campaign name
More: http://piwik.org/docs/tracking-api/
The action_name ist tracked as simple site, I don't know why and the request ist shown as visitor. AND with _rcn you can set a campaign.
Thats it.
Related
I am using SendGrid API to create/update/delete a Design.
as you can see in the picture below, there isn't any JSON item to set the value for the "preheader"
So after creating successfully in the Sendgrid design library the preheader is empty and we should fill it by editing the design. picture below
Is there any solution to set the value to the preheader with API?
I find the solution. As Philnash has mentioned in this post the pre-header is located in the body of the Email Design Html. But we should use some attributes which are very important.
Just append these 2 nested div with a p tag to the body of your Html-content. Then send it to the SendGrid
<div class="module preheader preheader-hide" role="module" data-type="preheader">
<div role="module-content" style="display: none!important; mso-hide:
all; visibility: hidden; ">
<p id="preheaderId"> your pre header </p>
</div>
</div>
This question already has answers here:
Gmail's new image caching is breaking image links in newsletter
(15 answers)
Closed 3 years ago.
I have created the following email template and send email to clients from my website (ASP.NET MVC, C#) using SendGrid. Note that there is an envelope icon at the end of the email.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>Some email content</p>
<hr/>
<p>reply info: </p>
<p>
<img src='https://prod-shopless-cdn.s3-ap-southeast-2.amazonaws.com/icons/email-icon.svg' alt='email' height='20' style='vertical-align: middle; padding-right: 5px;'>
<a rel='nofollow' ymailto='mailto:john#some-domain.com' href='mailto:john#some-domain.com'>john#some-domain.com</a>
</p>
</body>
</html>
When I send the email to a yahoo address, I see the following is prepended to the image url: https://ecp.yusercontent.com/mail? but the image still shows fine:
<p>
<img src="https://ecp.yusercontent.com/mail?url=https%3A%2F%2Fprod-shopless-cdn.s3-ap-southeast-2.amazonaws.com%2Ficons%2Femail-icon.svg&t=1577343946&ymreqid=eab30077-9a08-b7e9-1c70-820001015100&sig=idgsn8ycGFqhWibk5cnXTQ--~C" alt="email" height="20" style="vertical-align:middle;padding-right:5px;">
<a rel="nofollow" ymailto="mailto:john#some-domain.com" target="_blank" href="mailto:john#some-domain.com">john#some-domain.com</a>
</p>
When I send the email to a Gmail account, I see the following is prepended to the image url: https://ci5.googleusercontent.com/proxy/fMePoJvSwECei02DF_cx9SKczcRDRDa9XeJs263AGBRUysoCNxeZhErF834cSHBLcBGkDR-JWdfqhZkW878P9A3gM7nh8dRfdNxjVpBrGiNBBJCoRnNmBrkSAoF-TBu3IQ=s0-d-e1-ft# and the image no longer shows.
<p>
<img src="https://ci5.googleusercontent.com/proxy/fMePoJvSwECei02DF_cx9SKczcRDRDa9XeJs263AGBRUysoCNxeZhErF834cSHBLcBGkDR-JWdfqhZkW878P9A3gM7nh8dRfdNxjVpBrGiNBBJCoRnNmBrkSAoF-TBu3IQ=s0-d-e1-ft#https://prod-shopless-cdn.s3-ap-southeast-2.amazonaws.com/icons/email-icon.svg"
alt="email" height="20" style="vertical-align:middle;padding-right:5px" class="CToWUd">
<a rel="nofollow" href="mailto:john#some-domain.com" target="_blank">john#some-domain.com</a>
</p>
How can I resolve this issue?
The change of image URL on both Yahoo and Gmail is because they use their image caching, more info about Gmail Image Proxy
I found the answer to my problem here, it appears that Google Image Proxy works with standard image types (.jpg, .png and .gif)... my image type was .svg, I changed the template to use .png and it works fine now.
I have made an email signature in Outlook (2016) by pasting HTML in the window where one can type a new signature (File>Options>Email>Signatures>New).
It looks good when sending a mail, it shows all images. The receiver of the mail (on any other mail client but Outlook, e.g. on Apple Mail or Gmail) can see the images too, but when this receiver using Apple Mail or so is going to reply to this mail, the images in the signature of the originally sent email have disappeared and have been replaced by
<image001.png> (referring to images saved locally within C:\Users\[name]\AppData\Roaming\Microsoft\Signatures, in the respective [signature name]_files folder, while the src of the original <img/>s in the signature are URLs to actual accessible files on the web). These images can be displayed anyway by clicking a button to 'include attachments of the original mail', which is, let's say, weird. It apparently turns the images in Outlook-signatures into attachments, which are being blocked or so, as it seems.
Has anyone had a comparable problem, and/or is kind to share a solution for this issue?
Thank you in advance.
Try adding ? and then a random number at the end of your image URL. Also, make sure you are using a CDN to deliver the image. I use cloudinary.com...
Here is an example of what I did...
<table cellPadding="0" cellSpacing="0">
<tbody>
<tr>
<td style="vertical-align:top"></td>
<td>
<div><font size="4">Name</font></div>
<div>Title</div>
<div><span style="margin-right:8px">phone</span></div>
<div><span style="margin-right:8px"><a style="color:blue" href="mailto:email">email</a></span></div>
<div><span style="margin-right:8px">address</span></div>
<div style="padding: 0 0em 2em 0;">
<img src="http://CDN/Facebook.jpg?7" alt="Facebook" />
<img src="http://CDN/Twitter.jpg?5" alt="Twitter" />
<img src="http://CDN/Instagram.jpg?3" alt="Instagram" />
<img src="http://CDN/Linkedin.jpg?2" alt="LinkedIn" />
</div>
</td>
</tr>
</tbody>
I open this HTML in my web browser, copy and paste it into the signature section of Outlook. One caveat.. I am using the Outlook Web Browser for my email, not the Application.
I have been testing:
Outlook -> Gmail -> Outlook, and my signature stays intact.
So far this has been working for 2 days. I am going to keep testing but give it a shot and let me know if you see the same good results.
At the DSpace repositories of Massey University and University of Waikato in New Zealand there are buttons to share the link to a document in the repository with Twitter, Facebook and other social media.
Also have both sites a Window with Twitter tweets.
I hope someone of you wants to explain how both functionalities are added to the DSpace Mirage 2 theme.
We use the addThis service with our DSpace installation: http://www.addthis.com/
The service allows you to customize the share options for your site.
For Mirage2, we added the following javascript to Mirage2/xsl/core/page-structure.xsl to add the service to our site. The link will contain a unique id for your configuration.
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=..."></script>
We also added some custom CSS to Mirage2/styles/_style.scss
.container {
padding-left: 50px;
padding-right: 50px;
}
You can preview this on our repository site: https://repository.library.georgetown.edu/
terrywb's answer covers the share button aspect - that is exactly the service used at the University of Waikato's repository that Peter linked to. We add the JavaScript in navigation.xsl not page-structure.xsl, and we also add
<div class="addthis_sharing_toolbox list-group" style="min-height:37.5px"></div>
just after the opening tag for the #ds-options div, in line with the AddThis embedding instructions.
As to the tweets on the home page, refer to the Twitter embedded timeline instructions. I believe we add a placeholder div via news-xmlui.xml that then triggers a template in theme.xsl that pulls in the JavaScript and generates the required a element - example below is from the Twitter documentation.
<a class="twitter-timeline"
href="https://twitter.com/TwitterDev"
data-width="300"
data-height="300">
Tweets by #TwitterDev
</a>
If you want to avoid services like AddThis tracking your users or just want to keep it simple, you can use simple share links. Add to dspace-xmlui-mirage2/src/main/webapp/xsl/aspect/artifactbrowser/item-view.xsl this template:
<xsl:template name="share-section">
<div class="item-page-field-wrapper table hidden-print">
<h5><i18n:text>xmlui.mirage2.itemSummaryView.ShareSection</i18n:text></h5>
<xsl:variable name="url">
<xsl:value-of select="encoder:encode(confman:getProperty('dspace.baseUrl'))" />
<xsl:value-of select="encoder:encode('/handle/')" />
<xsl:value-of select="encoder:encode(substring-after(/mets:METS/#OBJID,'handle/'))" />
</xsl:variable>
<a target="_blank" i18n:attr="title" title="xmlui.export.mendeley"
href="http://www.mendeley.com/import/?url={$url}">
<img src="{concat($theme-path,'/images/mendeley.png')}"
i18n:attr="alt" alt="xmlui.export.mendeley" />
</a>
<a class="social-network-icon twitter"
href="http://twitter.com/home/?status={$url}"
title="Share on Twitter" target="_blank"></a>
<a class="social-network-icon facebook"
href="http://www.facebook.com/sharer.php?u={$url}"
title="Share on Facebook" target="_blank"></a>
</div>
</xsl:template>
Here you can find more share links for other social networks.
Then, you have to call the template from where you want it to appear. For example, we add it to the first column of the item metadata, at the <xsl:template match="dim:dim" mode="itemSummaryView-DIM"> template of the same file.
We got the icons from Expando (another option for sharing with social networks, and it's free software). This CSS is to show the icons:
.social-network-icon {
background-image: url("../images/social-networks-icons.png");
background-repeat: no-repeat;
background-origin: 0;
display: inline-block;
height: 16px;
margin-left: 4px;
vertical-align: middle;
width: 16px;
}
.social-network-icon.facebook {
background-position: -0*16px 0;
}
.social-network-icon.google-plus {
background-position: -2*16px 0;
}
I'm trying to add a gist to my blog to see how it works and use it to share some code related blogs going forward.
I've followed the steps mentioned form this blog, but I'm not able to get it to work. I don't know what I'm missing, any pointers on what I could be missing would be really appreciated.
My HTML Editor of blog related code looks like this:-
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hi<br />
<br />
test<br />
<br />
<br />
<div class="gistLoad" data-id="4132084" id="gist-4132084">
Loading ....</div>
<br />
<br />
<br />
<br />
<pre style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; word-wrap: break-word;"></pre>
</div>
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script> </div>
Thanks.
UPDATE (including, changing the code above)
I found one thing confusing for a while, why should I actually paste a div tag in the "Compose" Section of the Blog, it's afterall HTML code, so I moved it to the HTML editor part of the Blog. What was confusing to me initially was when it was mentioned in the blog:-
Now to include any gist template just add the following anywhere in
your blog post.
But anyways, now, I only get "Loading" .., The error still persists..
Here's the code that did it correctly for me. I had to ensure that within the div I copy the code that comes as part of 'Embed the gist' when you actually see one's real gist(say for e.g., this gist) on Github.
Also, one more mistake I made was in my code, the JS was not completely outside the post(it was actually inside the last div if you observer closely(my bad)). Anyways, All's well that end's well :). So here's the code that did the trick for me -
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hi<br />
<br />
test<br />
<br />
<br />
<div class="gistLoad" data-id="4132084" id="gist-4132084">
<script src="https://gist.github.com/boddhisattva/4132084.js"></script>
In case you want to see how I was able to embed the gist in my blog, you can have a look
at the stackoverflow question that I posted here on the same when I had initially faced issues to get this to work for me.
Credits to the original blogger's post.
</div>
<br />
<br />
<br />
<br />
<pre style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; word-wrap: break-word;"></pre>
</div>
</div>
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
Here's the actual blog link which uses the above code.
Cheers.. :)
A simpler solution (since October 2014): www.gistfy.com:
Gistfy is an easy way to create embeddable code snippets from your GitHub and Bitbucket repositories or your GitHub Gist.
For example:
<script type='text/javascript' src='http://www.gistfy.com/github/gist/10666727'></script>
^
(id of a GitHub Gist)
The blog post you mention explains everything clearly and it's all you have to do. I'll describe what I did:
I copied the <script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script> into a widget that is dynamically loaded into each blog page (posts, pages, everything). This will not work, because, as being said, include the following code at the end of each of your blog posts. This means you have to include it separately in al your posts. Yes, I don't like it as well, but the blog entries are loaded dynamically, so you have to load gists after the original blog entry is loaded.
Put the <div class="gistLoad" data-id="GistID" id="gist-GistID">Loading ....</div>
just where you would put original github gist code. For example - this is a gist I wanted to display on my post. This is the original code: <script src="https://gist.github.com/tkoomzaaskz/6235219.js"></script>. The gistID is 6235219. So, instead, I put <div class="gistLoad" data-id="6235219" id="gist-6235219">Loading ....</div>. And in the end of the post, I put the javascript source from point 1.
This blog post is an example that it works fine.
I dont know, whether your are trying gist content made it as private or public. Here are the few steps for how to implement PUBLIC gist code into your blogger.
1) Create a gist file in gist.github.com(While you save the file just choose as "Create Public Gist"
2) Take/copy the code "Embed URL" text box(almost you done).
3) Login to your blogger and add copied code into your desired posts. Thats all. Your public gist code will display in your page.
Actual article from here
For me it was because i was using dynamic view template on google blogger. When i changed it to simple then the javascript was working and showed the gist.
The 3rd party github hosted file tag didn't work for me at all. - <script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
failed in chrome with Refused to execute script from 'https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
The embed links on github's site work, but for those wanting to avoid the reliance on a script link, I wrote code to pull down what the embed link serves up and decode it for pasting into blogger. LinqPad code at https://github.com/ImaginaryDevelopment/LinqPad/blob/master/LINQPad%20Queries/LanguageTranslators/fetch%20then%20parse%20gist%20html.linq
Kindly look for the Embed code ofrthe gist, i found out it to be
<script src="https://gist.github.com/boddhisattva/4132084.js"></script>
The just create a blogpost in blogger.com with just the above script, it's that easy