Escaping Google Analytics Measurement Protocol Image

Nicole Foster's Avatar

Nicole Foster

03 Nov, 2015 02:40 PM

Hi,

I'm trying to put this code directly into one of my XML blocks:

<img src="http://www.google-analytics.com/collect?v=1&tid=UA-19988952-9&cid=bd809d48-63ef-4b0b-80c6-bbd154e7adf6&t=event&ec=email&ea=open&el=bd809d48-63ef-4b0b-80c6-bbd154e7adf6&cs=newsletter&cm=email&cn=062413&cm1=1" />

I do have a function set up that would escape any ampersands:

 <xalan:component functions="encodeAmpersand" prefix="ss"> 
        <xalan:script lang="javascript"><![CDATA[ 
          var encodeAmpersand = function (input) { 
            return input.replace(/&(?!amp;)/g, '&amp;'); 
          }; 
        ]]></xalan:script> 
    </xalan:component>

What would be the best way to wrap the img code above with the function I have already created.

Thanks,
Nicole

  1. 1 Posted by Ryan Griffith on 03 Nov, 2015 03:58 PM

    Ryan Griffith's Avatar

    Hi Nicole,

    You would need to pass the content of the block through your Xalan function. How you go about this depends on how you are including the block on the page. Are you using a Block chooser or adding it directly to the page region?

    Thanks!

  2. 2 Posted by Nicole Foster on 03 Nov, 2015 07:14 PM

    Nicole Foster's Avatar

    Hi Ryan,

    I'm just adding directly into one XML block that generates an HTML newsletter in its entirety. The image is Google Analytics' 1x1 transparent pixel and we're using it to track email opens for our newsletters, so I need the image to be in the block itself instead of embedded.

    Thanks,
    Nicole

  3. 3 Posted by Ryan Griffith on 03 Nov, 2015 07:30 PM

    Ryan Griffith's Avatar

    Hi Nicole,

    To confirm, are you adding the XML block directly to a page region, or is it being added using a block chooser?

    If you are adding it directly to a page region, I believe you should be able to attach a simple Velocity Format to encode the ampersands:

    $contentRoot.replaceAll("&(?!(amp;))", "&amp;")
    

    Similarly, if you are using a block chooser you would just need to apply the replaceAll to the content of the block.

    Please let me know if you have any questions.

    Thanks!

  4. 4 Posted by Nicole Foster on 03 Nov, 2015 07:33 PM

    Nicole Foster's Avatar

    Hi Ryan,

    We are adding it directly to a page region. The block itself is in XSLT.

    Thanks,
    Nicole

  5. 5 Posted by Ryan Griffith on 03 Nov, 2015 09:29 PM

    Ryan Griffith's Avatar

    Hi Nicole,

    Should be doable using XSLT. When you have a moment, please attach the content of your XML block and I'd be happy to help with an XSLT format.

    Thanks!

  6. 6 Posted by Nicole Foster on 03 Nov, 2015 09:51 PM

    Nicole Foster's Avatar

    Hi Ryan,

    I have attached the entire xml block in this post.

    Thanks,
    Nicole

  7. 7 Posted by Ryan Griffith on 04 Nov, 2015 02:41 PM

    Ryan Griffith's Avatar

    Hi Nicole,

    It looks like you may have accidentally attached a Format. When you have a moment, please attach the XML Block's content.

    Please let me know if you have any questions.

    Thanks!

  8. 8 Posted by Nicole Foster on 04 Nov, 2015 03:38 PM

    Nicole Foster's Avatar

    Hi Ryan,

    I apologize immensely for the confusion.

    The newsletter is generated only using a template and format block. The template is below:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>SU Alumni</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><link href="//fast.fonts.net/cssapi/24365087-b739-4314-af6e-741946b60bef.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <style type="text/css">
                body{
                    margin:0;
                    font-family: 'ITC Franklin Gothic W01',  sans-serif; 
                    font-style: normal;
                }
                p{
                    margin:0px;
                }
                a img{
                    border:none;
                }
                a{
                   color: #dc6928;
                    text-decoration: none;
                    border:0px;
                }
                a:visited{
                    color: #dc6928;
                }
                a:hover{
                 color: #dc6928;
                }
             
                b, strong, a {
                color: #dc6928;
                }
                .orange{
                    color:#dc6928;
                }
                .orangebg{
                    background-color:#dc6928;
                }
                .lightgreybg{
                    background-color: #e7e5e4;
                }
                .lightgreyborder td{
                    border-bottom: 1px solid #e7e5e4;
                }
                .darkgreybg{
                    background-color: #3e3d3c;
                    color: white;
                    
                }
                .full{
                    width:600px;
                }
                .marg{
                    width:10px;
                }
                .mark1{
                    font-size:18px;
                    color: #3e3d3c;
                    line-height:20px;
                    margin: 4px 0px;
    
                }
                .mark2{
                    font-size:0.9em;
                    color: #3e3d3c;
                 }
                .mark3{
                    font-size:16px;
                    color: #3e3d3c;
                    line-height:20px;
                 }
                .mark4{
                    font-size:16px;
                    color: #3e3d3c;
                    line-height:20px;
                    font-style: italic;
                }
                .link1{
                    line-height: 20px;
                    font-size: 1.1em;
                    color: #dc6928;
                    text-decoration: none;
                }
                .button{
                    background-color:#dc6928;
                    text-align:center;
                    font-size:14px;
                    width:142px;
                    color: white;
                    text-transform: uppercase;
                    padding: 5px 0;
                }
                .right{
                    text-align:right;
                }
                .dates{
                    font-size:0.9em;
                    color: #3e3d3c;
                    line-height:18px;
                    font-weight: bold;
                    margin:0px;
                }
                .dates p{
                    margin:0px;
                }
                .upc{
                    text-transform:uppercase;
                }
            
             
        </style>
    <system-region name="DEFAULT"/>
    </body>
    </html>
    

    and the format is what I attached above. There is no XML block attached. We only use the template, format, and what the user inputs into the data definition, which is below:

    <system-data-structure>
        <group identifier="heading" label="Heading">
            <asset type="block" identifier="siteinfoblock" label="Site Info Block" render-content-depth="3" required="true"/>
            <asset type="file" identifier="banner-image" label="Banner Image" help-text="600px by 250px strict"/>
            <group identifier="issue-info" label="Issue Information">
                <text identifier="issue-text" label="Issue Text and/or Date"/>
            </group>
        </group>
        <group identifier="feature" label="Feature Story" multiple="true" maximum-number="3" minimum-number="1">
            <text identifier="flavor-text" label="Flavor Text" help-text="This is not the full heading of a feature, just a teaser."/>
            <text identifier="feature-link" label="Feature URL" default="http://"/>
            <text identifier="feature-title" label="Feature Title"/>
            <asset type="file" identifier="feat-image" label="Feature Image" help-text="224px by 185px Strict"/>
            <text wysiwyg="true" identifier="feature-date" label="Feature Date"/>
            <text wysiwyg="true" identifier="feat-description" label="Feature Description"/>
        </group>
        <group identifier="news" label="News Section" multiple="true">
            <text identifier="news-text" label="News Section Heading" default="In The news"/>
            <group identifier="news-story" label="News Story" multiple="true">
                <text identifier="news-url" label="News Url" default="http://"/>
                <text identifier="news-title" label="News Title"/>
                <asset type="file" identifier="news-image" label="News Image" help-text="224px by 185px strict"/>
                <text wysiwyg="true" identifier="news-story" label="News Description"/>
            </group>
        </group>
        <group identifier="link-button" label="Link Button" multiple="true" maximum-number="4" minimum-number="4">
            <text identifier="link-url" label="Link URL" default="http://"/>
            <text identifier="link-text" label="Link Text"/>
        </group>
        <group identifier="footer" label="Footer">
            <text identifier="dept-link" label="Department URL" default="http://" required="true"/>
        </group>
    </system-data-structure>
    

    I have tried placing

    <img src=”http://www.google-analytics.com/collect?v=1&tid=UA-19988952-9&cid=bd809d48-63ef-4b0b-80c6-bbd154e7adf6&t=event&ec=email&ea=open&el=bd809d48-63ef-4b0b-80c6-bbd154e7adf6&cs=newsletter&cm=email&cn=062413&cm1=1″ />
    

    into the template file, but that did not work as well. My only other option would be putting it into the XSLT format from my response above.

    Thanks,
    Nicole

  9. 9 Posted by Ryan Griffith on 04 Nov, 2015 06:38 PM

    Ryan Griffith's Avatar

    Thank you for the clarification, Nicole, I believe I am following now.

    Will this hidden image ever change based on the email, or will it stay the same? Curious, but could you just place the <img> tag at the bottom of your template and escape the ampersands manually? So:

    <img src="http://www.google-analytics.com/collect?v=1&tid=UA-19988952-9&cid=bd809d48-63ef-4b0b-80c6-bbd154e7adf6&t=event&ec=email&ea=open&el=bd809d48-63ef-4b0b-80c6-bbd154e7adf6&cs=newsletter&cm=email&cn=062413&cm1=1" />
    

    Would be changed to:

    <img src="http://www.google-analytics.com/collect?v=1&amp;tid=UA-19988952-9&amp;cid=bd809d48-63ef-4b0b-80c6-bbd154e7adf6&amp;t=event&amp;ec=email&amp;ea=open&amp;el=bd809d48-63ef-4b0b-80c6-bbd154e7adf6&amp;cs=newsletter&amp;cm=email&amp;cn=062413&amp;cm1=1" />
    

    Please let me know if you have any questions.

    Thanks!

  10. 10 Posted by Nicole Foster on 05 Nov, 2015 03:04 PM

    Nicole Foster's Avatar

    Hi Ryan,

    That did the trick. I didn't think it would be as simple as that!

    Thanks,
    Nicole

  11. 11 Posted by Ryan Griffith on 06 Nov, 2015 08:41 PM

    Ryan Griffith's Avatar

    Thank you for following up, Nicole, I am glad to hear the adjustment did the trick.

    I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.

    Have a great day!

  12. Ryan Griffith closed this discussion on 06 Nov, 2015 08:41 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac