Adding a promotion image in Gmail

Highlighted

Adding a promotion image in Gmail

Hi everyone,

I am trying to implement a promotional image on Gmail as described in this article here. https://blog.returnpath.com/promoting-meaningful-communication-with-gmail-promotions-update/

This seems to bypass the issues talked about in this thread here https://nation.marketo.com/thread/40803-how-do-we-get-our-company-logo-to-show-in-gmail

I know that Marketo does not allow JSON code in the email so I am using microdata in the body tags to try an implement this.

Using Litmus' Gmail Promotions Builder tool https://litmus.com/community/gmail-promotions-builder it gave me this code

(Imagepath is the URL to the image hosted in our Marketo instance)

<div itemscope itemtype="http://schema.org/Organization">

<meta itemprop="name" content="Gmail" />

<meta itemprop="logo" content="https://imagepath/image.png" />

</div>

Yet, when I send an email to my Gmail account, the logo is not showing up. When I check the code in the template I find that Marketo keeps changing the code in the first line to

<div itemscope="" itemtype="http://schema.org/Organization">

Would this be enough to stop the image from rendering? Has anyone had success in implementing this? Any help would be appreciated.

Michael

10 REPLIES 10
Highlighted

Re: Adding a promotion image in Gmail

Hi Michael,

Known issue—right now, Marketo is stripping out any microdata, whether it's done with attributes or LD-JSON. Probably need to file an idea about it at some point.

Highlighted
Level 10 - Community Moderator

Re: Adding a promotion image in Gmail

Output it from a Velocity token.

Highlighted

Re: Adding a promotion image in Gmail

Hi Sanford

Trying to write the Velocity script, I keep getting validation errors when I try to approve it. Here is my code that I have in the token

#set (myItemScope == "itemscope")

#set (myItemType == "schema.org/Organization")

#set (myItemProp == "meta itemprop=name content=Gmail")

#set (myItemPropLogo == "meta itemprop=logo content=https://imagepath/image.png ")

<div

${myItemScope}

${myItemType}

${myItemProp}

${myItemProp}

</div>

I am new to Velocity so I know I am missing a lot. Any thoughts?

Highlighted
Level 10 - Community Moderator

Re: Adding a promotion image in Gmail

You left out the $ before all the variable names. But you don't have to use variables yet. Paste the whole JSON-LD in the token to start (hard-coded in other words).

Highlighted

Re: Adding a promotion image in Gmail

Sorry I not sure what you mean. Do you mean the script should look like this? I have also tried it with the script tag taken out. I am placing the token in the body tag of the email.

It this isn't it, could you give me an example? Thanks

<script type="application/ld+json">

[{

"@context": "http://schema.org/",

"@type": "Organization",

"name": "Edvisors",

// If showing a logo, we recommend using an https URL.

// It's not a requirement today, but may be in the future.

"logo": "https://imagepath/image.png "

},{

"@context": "http://schema.org/",

"@type": "EmailMessage",

// Alternative subject line, coming soon.

"subjectLine": "Student loans: plan more, stress less"

}]

</script>

${itemscope}

${itemprop}

${itemproplogo}

#set ($myItemScope == "itemscope")

#set ($myItemType == "schema.org/Organization")

#set ($myItemProp == "meta itemprop=name content=Gmail")

#set ($myItemPropLogo == "meta itemprop=logo content=https://imagepath/image.png ")

<div

${myItemScope}

${myItemType}

${myItemProp}

${myItemProp}

</div>

Highlighted
Level 10 - Community Moderator

Re: Adding a promotion image in Gmail

When posting code please use the syntax highlighter (in Advanced Editor) so it's readable.

https://s3.amazonaws.com/blog-images-teknkl-com/syntax_highlighter.gif

It looks like you're interpreting "use a Velocity token" as "use Velocity # directives". You don't need to write "code" per se to use Velocity (though obviously most of the time you need more logic). If you just paste that HTML into Script Editor -- and nothing else -- it's output as-is when you add the {{my.token}} to an email.

Highlighted
Level 6

Re: Adding a promotion image in Gmail

Sanford Whiteman​ -- completely an aside here, but what did you use to create the video capture above? It's super helpful to see what's going on -- any suggestions on something (PC) to use for this?

Highlighted
Level 10 - Community Moderator

Re: Adding a promotion image in Gmail

That's LICEcap​ (@ 16fps). Free + flawless (if not exactly full-featured).

Highlighted

Re: Adding a promotion image in Gmail

I put the div tag code into a script token and the code is coming out the way it should. However the image is still not showing up. Checked the link to the image, it works, and double checked the code and it's coming out correctly when I view the email as a webpage and look at the code there.

Now, I am wondering if Gmail has not implemented this feature across all addresses. They have done rolling releases in the past.