Thank you for comprehensive answer. I am on Windows and on Android, so will use those two. Thank you again.
Started a new discussion: What kind of blind/screen reader you are using?
Strange - I have posted reply and it disappeared. So once again.
Our ESP let us create so-called "link-tables". In these tables we can store all the links which we use in our emails and add aliases to these links. There could be more than one alias for the very same URL. Then in the HTML of email we simply put specific function calling this alias and during the sendout, it is replaced by trackable URL which leads to final URL stored in link table. This way I can track
If you do not have this option I suggest to use different UTM parameters to differentiate the links or add some text behind the # sign. For example "thank-you-page.com/#A1-B3-C2". This should different enough for ESP but has no difference when it comes to the final redirect to the page. Furthemore, if you set up all these codes correctly, you can see the answers directly in the click report. In my example, you will know that the user who clicked on that link picked answer number 1 for the first question, answer number 3 for the second question and answer number 2 for the third question. This is also the naming convention I have used in my case.
One more note - if you are going to use punchcard coding and hide elements using display:none be sure to check Samsung email app (but on real Samsung phone). In my case, this did not work and I had to use visibility:collapse together with display:none.
Good luck.
Tomas
PS: I have read your question once again and I do not know if I have understood it in the way you have mentioned it. So just to be 100% sure I answered it correctly - last note - we have taken users to a thank you page - once they clicked on the submit button, they have been redirected to an external thank you page.
In our case, it was easy. Our ESP (Oracle Responsys) let us create alias for every single link and store it in so-called "link-tables". Then in the HTML of email you can call this link by special "clickthrough" function. In other words, we do not put urls directly in anchor tag, instead we use something like this <a href="${clickthrough('URL_Alias')}">. Best thing about this function is that you can use different aliases for the very same URL. So I can differentiate between clicks on footer and header logo for example, dispite the fact that both of these logos are pointing to the very same URL. I just simply create two different aliases with the very same URL and with clickthrough function I call the right alias on the right logo.
I am not familiar with Pardot, but if there is no such a possibility as I have described above, I suggest to use different utm parameters for the very same link or use the very same URL but with small difference which cause no problems when loading a page but looks different to ESP - something like "http://www.thank-you-page.com/#1" for the first answer, "http://www.thank-you-page.com/#2" for the second answer,.... Or move it little bit further and these "tags" could be more explanatory - "http://www.thank-you-page.com/#A2-B3-C1". So you will know right from the click report that this user picked answer number 2 for the first question, answer #3 for the second question and answer #1 for the third question. This is pretty the same naming convention I have used when I was creating my aliases for all these 18 buttons.
Onemore thing regarding coding and HTML of emails. If you are going to hide elements using "display:none" be aware - Samsung email app ignored it, when I was creating this email. So I have used combination of "display:none" and "visibility:collapse". I think there is a bug in Litmus Checklist (previews), as it shows interactive email in Samsung email app, despite the fact that it won't work on those devices (apps). I tested it on Galaxy S7 Edge. Furthermore, some older Samsung email apps have problems also with this "visiblity:collapse" and show blank spaces instead of hidden elements. And furthermore, some web based clients on Chrome won't display neither the interactive and neither the fallback part of the email - but I do not have time to found solution for this and in my case I know my audience were using mostly MSO, Samsung devices and iPhone devices. So be sure, there is no huge amount of your customers who will see blank email or at least have visible "view as a webpage" hyperlink in you email.
Tomas
Hi Jeremy,
I do not have much experience with interactive emails, however, I have recently sent out one interactive email with very simple questionaire.
There were three questions. First one was the same for all and has two possible answers. Based on the answer, one of two different questions was displayed with three possible answers. Based on the answer on second question, one of 6 different questions was displayed as a third question. After all three questions have been answered, "SUBMIT" button has been displayed. There were 18 possible combinations of answers in total.
In the backend, there were 18 buttons - all look the same but the links were slightly different. Based on the answers, I displayed one of the buttons to the user and then in our ESP I have checked clicks on those specific links. This way I get all the answers from the email.
For the rest of the people (those who do not have email client with WebKit rendering engine) there was a fallback with classic "Take the survey" button which leads to web based questionaire. So at the end of the "campaign" I combined two sources of data to have all the answers in one place.
To create this interactive email I have used Marc Robbins "punch card coding" technique.
Hope it helps.
Tomas
I know, I know - in email design, you cannot be 100% sure. Really big thanks for the help!
So, I have figured out, that Samsung app is ok with visibility:collapse - when it is used on tables, it works similar to display:none. This solved my issue and according to Litmus checklist, this does not effect other clients.
Thank you Dee! Thank you for the articles, there are some nice tricks I do not know about.
Today in the morning (it was 4 o'clock I think), when I was carrying my little daughter and hoping she fall a sleep shortly, I started to think about this issue and I 've come to the very same conclusion - hide everything by default using 0 font size, line height, height and width. It's funny how our brain works and that the best ideas come to your mind when you are totally exhausted :D
I am going to give it a try, will see what happened to radio buttons after some styles applied. I tested visibility:hidden, which works for Samsung app, but it leaves huge blank space (of course). So I think, if there are no spam issues with visibility:hidden, that I will use combination of display:none, visibility:hidden and 0 sizes.
I will update this discussion with my findings.
Once again, thank you!