Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

Adding a banner with text in a X/T test

jordans17317991
Level 2
Level 2

I am trying to add a Banner or a box with some text and color across the header of one of my experiences, basically the variation of the activity. I cannot see a way to do this when selecting the container of the page to add or replace with. Am I able to do this without having Adobe Scene 7 integrated? Keep in mind I am not swapping out an image, only adding a banner to the top of the page with new text and color to go with it. Any help would be great.

20 Replies
mikewebguy
Employee
Employee

jordans17317991​,

Here is how I would get this done:

1. Left click on the element.

2. Click on "Expand Selection" to get to the element you want to edit (Sometimes you will have to do this a few times) (See attached screenshot below.)

3. Once you have the element selected use the option under: Edit > Text/HTML to adjust text or change the actual HTML of the page to insert the new banner text etc. (See attached screenshot below)

Hope this helps!

Expand Selection:

_1._expand_selection.png

Edit Text/HTML:

_2._edit_text_html.png

Mihnea Docea  | Technical Support Rep, Customer Care | Customer & Employee Experience | Adobe | (:: 1 (800) 497-0335

jordans17317991
Level 2
Level 2

Hey Mike,

This is very helpful. My client also has strict guidelines with font and brand color. What would be the easiest steps to select/upload these into Target vs what Adobe provides? Please see what the experiences for this test I am trying to create look like below and let me know your thoughts. Thanks!

1638563_pastedImage_0.png

mikewebguy
Employee
Employee

jordans17317991​,

Unfortunately you wouldn't upload the Font/color combo into target but you could create the offer by editing the actual HTML code so whatever you can code for in HTML you would be able to insert into Target.

If you will be using this offer a lot there is a way to save that piece of code that you are using to create the blue banner as a standalone code offer you can do that in Target from: "Offers > + Create" See screen-shot below.

Hope this helps!

Pre-saving offer code:

_1._create_code_offer.png

Mihnea Docea  | Technical Support Rep, Customer Care | Customer & Employee Experience | Adobe | (:: 1 (800) 497-0335

jordans17317991
Level 2
Level 2

Hey Mihnea,

Is there an easy way to do this without updating the HTML code for this offering as I do not have coding experience with HTML. Can I just edit the text and color along with creating the banner in the Target interface itself?

Thanks,

Jordan

mikewebguy
Employee
Employee

jordans17317991​,

The idea behind the Experience Composer is that it's an easy visual way to modify the existing content (Default Experience) to something new. If the banner were already there in a different color you could edit the banner however since it does not yet exits it will have to first be created. There is no UI functionality to allow you to insert and drag a banner. The two options to getting it in there woudl be to add it as html code or design it as an image and add the image. I did some looking around and found some sample HTML for banner code. It woudl need to be customized but it's a start: https://support.litmos.com/hc/en-us/articles/115001428953-Sample-HTML-Banner-code

Hope this helps!

Mihnea Docea  | Technical Support Rep, Customer Care | Customer & Employee Experience | Adobe | (:: 1 (800) 497-0335

jordans17317991
Level 2
Level 2

That makes sense.  I was not aware as this is the first experience creating something new like this that is not in the original default experience. Currently, my client has Adobe Scene 7 integrated with Adobe Target. However, once I have final images/assets do I need to upload them into the content library in Target and they will be able to select once I am editing my experience? What is the best action to take for this?

Thanks,

Jordan

mikewebguy
Employee
Employee

jordans17317991​,

You can integrate Scene7 from inside of Target from: Setup > "Scene7 Settings" see attached screen-shot below. If you don't know the information to use in the required fields you can obtain it from the Scene7 Support team (s7support@adobe.com)

Hope this helps!

_1._Scene7_Integration.png

Mihnea Docea  | Technical Support Rep, Customer Care | Customer & Employee Experience | Adobe | (:: 1 (800) 497-0335

jordans17317991
Level 2
Level 2

Thank you, Mihnea. When replacing background images will it be an easy swap of images that are within content library? Our client will be providing only jpeg images and no HTML code for these. I am already having difficulty maneuvering images around in both control and variation experiences currently within interface. Do you have any documentation of easy ways to do this? The shell of my campaigns are built, but I am struggling to create the experiences they have with their mock ups. Please see below for example. Or let me know if you would like to hop on a screen share if you are able to as I think that would be beneficial for me!

1645387_pastedImage_0.png

mikewebguy
Employee
Employee

jordans17317991​,

You can create either HTML or Image offer. There is some documentation on this here: https://marketing.adobe.com/resources/help/en_US/target/target/c_manage_content.html If you run into any technical issue with Adobe Target and you are a supported user you can open a ticket by emailing us at ttclientcare@adobe.com however in this case this does not appear to be a product bug just an issue where you were given two jpegs to create an activity when a combination of images and code might have been most appropriate.

Unfortunately content editing and activity creation is not something we are able to do on your behalf. With that said I'll do my best to give you some guidance here. In this case it appears you have been provided with some static images for an idea of what they want the Control and Variation to look like.

Some points to make:

1. The two banner images seem to be different sizes. This is definitely not idea.

2. It would probably be a good idea to request the banner images on their own and make sure they are the same exact size. (Not sure if they are expecting you to do the editing to accomplish this or what?)

3. Additionally you could request that they provide you the code for the text content underneath the image that way you can save that as HTML Offer3 and add it below either image offer. (Once again not sure if this is something they can provide you with or if they expect that you will be able to create the code based on the image they have provided.)

With that said the above is the proper way to do this. The very quick and not ideal way to do this woudl be to copy/paste image1 and paste it on top of image2 in an image processor. Save that file as image Offer2.

Hope this helps you out!

Mihnea Docea  | Technical Support Rep, Customer Care | Customer & Employee Experience | Adobe | (:: 1 (800) 497-0335

jordans17317991
Level 2
Level 2

Thanks, Mihnea. I appreciate the quick feedback and help. The client should be giving me final approved assets and mocks within the next few days. I should have set the expectation up front that HTML code would have been ideal vs them just sending over static .jpeg images. My client does not have an Adobe Target rep, but they do have an AEM rep. So, not sure if that is helpful. They are wanting me to create three tests total for both desktop/tablet and mobile. One will be an A/B test and two will be a X/T test. For now we can go back and forth with questions in this forum if you do not mind? Below are the three test variations if you wanted to look over when you have time and provide further feedback. Thank you for the assistance.

1645530_pastedImage_0.png

1645531_pastedImage_1.png

1645541_pastedImage_2.png

jordans17317991
Level 2
Level 2

Hey Mihnea,

Are you able to provide the easiest steps to copy and pace and image on top of one another for the default and variation image?

"With that said the above is the proper way to do this. The very quick and not ideal way to do this woudl be to copy/paste image1 and paste it on top of image2 in an image processor. Save that file as image Offer2".

We have approved assets from client so I am trying to get back in the interface to replace the images.

Thanks,

Jordan

mikewebguy
Employee
Employee

@jordans17317991,

That would have to be done in an image editor like Photoshop. Not sure of the best practices around that however someone from the Adobe Creative Cloud forum might be able to assist.

If you feel some of these replies have been helpful please use the thumbs up or star to show me some love back.

Mihnea Docea  | Technical Support Rep, Customer Care | Customer & Employee Experience | Adobe | (:: 1 (800) 497-0335

Abambo
Level 2
Level 2

Photoshop (or to be honest any modern image editor program) will be able to handle images with multiple layers and output those as flattened JPEG image files. However, if the customer only provides JPEG files, you will have a problem with "layering" as JPEG files do not offer transparency so only the top image will be visible. This said, depending on the images, JPEG layering will allow some transparency, but that is advanced image editing and of topic to discuss here in short.

If transparency is needed, you need to layer either PNG files with alpha channel (transparency mask, the bottom image may be a JPEG image). The standard situation, however, is to have an image as background and some text as foreground. That can be easily achieved with programs like Photoshop as long as the special font is available. The resulting (flat) JPEG file does not have layers and no fonts are needed to display that one. Photoshop files can be saved as native Photoshop files and remain (also text) editable if changes/corrections are needed. (Photoshop​ forum may be of help)

A last possibility is to use the image as a background and code the text as html over the image. This allows you to change the text more easily, without touching-up the underlying image. Fonts are an issue here, as you need to be able to bind the clients specific font (possible license issues). (the Dreamweaver support forum​ may help here)

jordans17317991
Level 2
Level 2

Appreciate the feedback. I am a novice at all of this so I am a little Lost of where I even start. It looks previously like a lot of these used custom HTML when I view past experiences. I can also see they had many HTML offers, so the person who created these before obviously knew what they were doing.

Abambo
Level 2
Level 2

Well, I'm a CC guy. I just read what has been answered by

jordans17317991
Level 2
Level 2

When I am trying to replace an image in the experience composer, my other containers cannot fall on top of that image and falling behind it. Basically, when I go to insert an image over the original my other text and content are not being displayed.

mikewebguy
Employee
Employee

@jordans17317991,

That is expected. Image editing is something you will have to do outside of Target. You can replace offer 1 with offer 2 in Target but it doesn't offer advanced image editing options. See Abambo 's comments from above on some suggestions best practices.

It sounds like this might be a good point to involve someone who can assist with some graphic design and coding into this project.

Mihnea Docea  | Technical Support Rep, Customer Care | Customer & Employee Experience | Adobe | (:: 1 (800) 497-0335

jordans17317991
Level 2
Level 2

Thanks, Mihnea. That is who I am trying to bring in for this to see if they can assist. Do you know how I create a new section of the page? For example I want a new section or two with more content to put in testimonials or text as seen below. Every time I try to edit current section or container it does not create new one.

1646590_pastedImage_0.png

jordans17317991
Level 2
Level 2

Hi Mihnea,

Do you you know if I have a redirect URL in an A/B test if I'll be able to track within in Adobe Target?

For example, the control of the test goes to this page: https://www.farmers.com/landing/ps-bi-2/

BUT

The variation is redirected to this page: https://www.farmers.com/landing/ps-brand-desktop-2/