I was looking to get open/click tacking using AMP for Emails
but yet to find any conclusive document to get any idea that how I can get tracking using AMP for emails.
Below is the sample code give by AMP but there is no tracking link of something given.
<!--
## Introduction
This sample demonstrates how to display a feed of data, allowing the user to go through
a large number of items in an email without having to scroll.
The sample uses a combination of [`amp-list`](/documentation/components/amp-list),
to fetch the initial items from the server and [`amp-form`](/documentation/components/amp-form),
to "refresh" a single item, by making a new server request.
-->
<!-- -->
<!doctype html>
<html ⚡4email lang="en" data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<!--
## Styles
We use CSS to hide the initially fetched item after the form is first submitted.
We also define a layout that allows us to have fixed card sizes, to ensure form submissions don't result in content jumps.
-->
<style amp-custom>
.amp-form-submit-success .initial-content,
.amp-form-submitting .initial-content,
.amp-form-submit-error .initial-content {
display: none;
}
.card {
width: 160px;
height: 120px;
margin: 10px;
float: left;
position: relative;
}
.card .next-button {
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!--
## Single item template
Define a template for a single item inside a card and give it an `id`. This template is used by `amp-form` for displaying new items.
In this case, we use a single `amp-img`.
-->
<template id="item-template" type="amp-mustache">
<amp-img src="{{items.imageUrl}}" layout="fixed" width="160" height="90"></amp-img>
</template>
<!--
## Initial list of items
We define a template for the initial items and their layout and give it an `id`, allowing us to use it subsequently in an amp-list. This template is used by `amp-list` for fetching the initial up-to-date contents from the server.
It contains in itself an `amp-form` for each item which references the template defined above referred by its `id`. By using a different template for the `amp-form`, we're able to "refresh" a part of the content, namely the image in this case.
Note: This template contains the same markup (in this case, a single `amp-img`) as used in the template above to render the initial items. This is wrapped inside `<div class="initial-content">` which becomes hidden the first time the user submits the form.
-->
<template id="list-template" type="amp-mustache">
<form class="card" method="post" action-xhr="https://amp.dev/documentation/examples/api/photo-stream?single&width=160&height=90">
<div class="initial-content">
<amp-img src="{{imageUrl}}" layout="fixed" width="160" height="90"></amp-img>
</div>
<div submit-success template="item-template"></div>
<input class="next-button" type="submit" value="Next">
</form>
</template>
<!--
We use `amp-list` to render the initial items from the server using the template defined above referred by its `id`.
The height matches the combined height of our cards and their margins. The initial server response defines the number of cards to be displayed (in this case four).
-->
<amp-list template="list-template" src="https://amp.dev/documentation/examples/api/photo-stream?width=160&height=90&items=4" layout="fixed" width="360" height="280">
</amp-list>
</body>
</html>
Can anyone give a idea to implement tracking on this?
Thanks
The documentation says "AMPHTML allows tracking email opens with pixel tracking techniques, same as regular HTML emails."
There is therefore no specific AMP way of doing it--it's just normal.
So, normally the ESP handles open tracking, and perhaps click tracking too, by rewriting the URLs. Alternatively, you can add for example UTM links if you use Google Analytics on the site the links are going to.
Related
I'm trying to make a text input area like this.
I tried this way
<v-text-field
label="Outlined"
placeholder="Placeholder"
background-color="white"
append-icon="mdi-arrow-right x-large primary"
outlined
></v-text-field>
And it give me this result.
Issues are
Icon doesn't get large enough to fill the entire text-area
Can't change the color of arrow stroke
What should I do to make this text area also receives file drag and drop?(user might want to type or sometimes drop a file to the text area
Thank you so much.
Hope someone who are well knowledgeable about vuetify could help me.
for part of your question about input design and look you should use provided slot from the v-text-field component, this way you can achieve more and here is the vuetify documentation about this: text field icon slots
and to check what other slots is available for this component check this list: all text field slots
even though using slot would achieve a lot more than prop, to fully achieve the desired result you might need to overwrite some css styles that you can find by inspecting the element in the browser dev tool to find them out.
I made the look you wanted with the approach described above in the code below:
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
.v-text-field.v-text-field--enclosed .v-text-field__details,
.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)>.v-input__control>.v-input__slot {
padding-right: 0 !important;
}
.v-text-field--enclosed .v-input__append-inner,
.v-text-field--enclosed .v-input__append-outer,
.v-text-field--enclosed .v-input__prepend-inner,
.v-text-field--enclosed .v-input__prepend-outer,
.v-text-field--full-width .v-input__append-inner,
.v-text-field--full-width .v-input__append-outer,
.v-text-field--full-width .v-input__prepend-inner,
.v-text-field--full-width .v-input__prepend-outer {
margin-top: 0 !important;
}
.pointer {
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-text-field label="Outlined" placeholder="Placeholder" outlined>
<template v-slot:append>
<v-sheet color="red" class="d-flex justify-center align-center rounded-r pointer" width="50" height="56">
<v-icon dark>
mdi-arrow-right
</v-icon>
</v-sheet>
</template>
</v-text-field>
</v-container>
</v-main>
</v-app>
</div>
about the drag and drop issue vuetify's v-file-input component does not natively support this behavior (for now at least) but you can read the article below to find out how to write this feature in vuetify:
Step by Step: Custom drag & drop upload component in Vuetify (Vue 2)
I am working on a set of Polymer elements (buttons in this particular case) some of which should re-use the same HTML snippet. A structure for a custom button is as follows:
...
<link rel="import" href="button-base.html" id="content">
<link rel="import" href="styles.html">
<link rel="import" href="behavior.html">
<dom-module id="dg-button">
<template>
<style include="button-styles"></style>
<!-- HERE I want the content of button-base.html -->
</template>
<script>
Polymer({
is: 'custom-button',
behaviors: [DG.ButtonBehavior]
});
</script>
</dom-module>
Styles and behavior work as they should.
The problem is: I am not sure how to get content of button-base.html into the specified place of the local DOM without defining button-base as yet another element and then using it as <button-base></button-base>.
The reasons I want to avoid converting it to the new element are:
I want the content of button-base to be a first-class citizen of the custom-button element's local DOM so that all the methods defined in the behavior would still apply using just this.myMethod() for buttons that do not import button-base and rather use custom local DOM.
I need to be able to declaratively set properties on this new custom-button so that they get reflected on DOM elements within button-base.html automatically.
For example, the content of the button-base.html is as follows:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<paper-button id="internalButton" raised$="[[raised]]">
<span id="defaultContent">
<content></content>
</span>
</paper-button>
I would like to set raised on my custom-button in a way that it gets mapped to paper-button automatically without proxying all of the possible attributes through a new element (in case I define base-button as a new element and import it as <base-button></base-button> in custom-button).
Any ideas on how to make this import work?
I have a polymer element <my-element> with a computed property myProperty. I need to bind myProperty to another place in the HTML page, so I can't put it inside a dom-bind template
Here's what I mean
<html>
<body>
<div>
<my-element my-property="{{myProperty}}"></my-element>
</div>
<!--somewhere deep inside another part of the document-->
<div>
<h4>myProperty = </h4><span>[[myProperty]]</span>
<div>
</body>
</html>
I cannot wrap my-element and the usage of [[myProperty]] in a dom-bind template as this would result in nearly the entire document being enclosed in this. Attempting to use the bind as it is results in myProperty = [[myProperty]] being displayed, not the value of [[myProperty]].
Is there some way to have behaviour similar to data binding but usable across the whole HTML document? (In the future there might also be a case where [[myProperty]] is used inside an attribute such as <my-second-element my-property="[[myProperty]]">). Or if both occurences are wrapped individually in dom-bind templates is there some way to make the bind global?
Thanks in advance
Not sure why you wouldn't be able to do like this:
<head>
...
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
...
</head>
<html>
<body>
<template is="dom-bind" id="app">
<div>
<my-element my-property="{{myProperty}}"></my-element>
</div>
<!--somewhere deep inside another part of the document-->
<div>
<h4>myProperty = </h4><span>[[myProperty]]</span>
<div>
</template>
</body>
</html>
This is totally doable. If myProperty changes inside my-element it would also change in "this" html-document. There also wouldn't be a problem adding your second element:
<my-second-element my-property="[[myProperty]]">
Unless you're missing to tell us some specific behavior that you want, this should be what you want. :)
Hi am trying to design an accordion component using sightly in AEM where instead of jsp we write html code along with different file for css and js under client libs.
I simply coded the below written part and wrote js for the same but am not able to see any changes ... Could someone please provide me a solution to implement the same.. ->when i click on show a parsys section opens up and when show converts to hide and when i click on hide the parsys section closes and hide converts to show.
<div data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-unwrap>
<css data-sly-call="${clientLib.css # categories=['sd-singtel.accordion_2']}" data-sly-unwrap/>
<js data-sly-call="${clientLib.js # categories=['sd-singtel.accordion_2']}" data-sly-unwrap/>
</div>
<div data-sly-test="${wcmmode.edit}">Accordion_2 component</div>
<div class="about-contentcontainer">
<div class="about-content">
<div class="awards">
<h4> <span class="more">Show</span></h4>
<h4> <span class="more expanded">Hide</span></h4>
</div>
</div>
</div>
<script>// <![CDATA[
$(document).ready(function() {
alert("Hello");
$(".awards h4 a").click(function() {
enter code here
$(this).parent().next().slideToggle("slow");
var htmlStr = $(this).find(".more").html();
if (htmlStr == "Show") {
$(this).find(".more").html("Hide");
$(this).find(".more").addClass("expanded");
} else {
$(this).find(".more").html("Show");
$(this).find(".more").removeClass("expanded");
}
});
});
// ]]></script>
Looking at it, I think that this has little to do with Sightly or even with AEM. Also, I'm not sure which content you want to toggle.
Below's a working HTML fragment for toggling content (independent from AEM):
<style>
.toggle-content {
display: block;
}
.toggle-content-hide,
.toggle-content-hidden .toggle-content-show {
display: inline;
}
.toggle-content-show,
.toggle-content-hidden .toggle-content-hide {
display: none;
}
</style>
<a href="#" class="toggle-content">
<span class="toggle-content-show">Show</span>
<span class="toggle-content-hide">Hide</span>
</a>
<div>Sample content 1</div>
<a href="#" class="toggle-content">
<span class="toggle-content-show">Show</span>
<span class="toggle-content-hide">Hide</span>
</a>
<div>Sample content 2</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
jQuery(function($) {
$('.toggle-content').click(function () {
$(this).toggleClass('toggle-content-hidden').next().toggle('slow');
return false;
})
});
</script>
To implement this in AEM, you should place the inline CSS into a CSS file of a client library, and the inline JS into a JS file of a client lib. I usually recommend to place them in the same client library within the component itself, so that everything that relates to that component is in the same folder. But when doing so, it is important to keep in mind that on a publish server, all /apps requests are forbidden by the dispatcher for security reasons, so all client libraries located under /apps should be merged and minified as one file that is typically located somewhere under /etc. To do so, you can use following repository node structure:
/apps/
mysite/
components/
mycomponent/
mycomponent.html Sightly template
clientlib/
jcr:primaryType = cq:ClientLibraryFolder
categories = [mysite.mycomponent]
css.txt contains just a reference to style.css
style.css contains the style snippet
js.txt contains just a reference to script.css
script.js contains the script snippet
/etc/
designs/
mysite/
clientlib/
jcr:primaryType = cq:ClientLibraryFolder
categories = [mysite.publish]
embed = [mysite.mycomponent, ...]
dependencies = [mysite.jquery]
The embed property of the /etc clientlib will make that it embeds and merges within the same file all clientlibs that are listed there. As opposed to the client libraries listed under the dependencies property, which will not get merged and will be served as a separate file. You can play with these properties to build the structure you need to optimize your site. There are also settings to automatically minify or not these files.
On the page, you then include the mysite.publish master clientlib located under /etc. So your page <head> element, would contain something like following Sightly template:
<head data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientLib.all # categories='sd-singtel.accordion_2'}" data-sly-unwrap/>
</head>
If you're using AEM 6.1, you can even drop the data-sly-unwrap, because the <sly> tag has the same effect.
After that, the Sightly template of your component located under a path like /apps/mysite/components/mycomponent/mycomponent.html would look as follows:
<div data-sly-test="${wcmmode.edit}">mycomponent name</div>
<a href="#" class="toggle-content">
<span class="toggle-content-show">Show</span>
<span class="toggle-content-hide">Hide</span>
</a>
<div>${properties.myContentProperty}</div>
Does anyone know if it's possible to disable the data detectors for phone numbers, email addresses etc in a UIWebView, for specific HTML elements only?
I'd like the detectors to be active for most of the content loaded into the UIWebView, but disable it in certain areas.
If this is possible, I'm assuming it would be achieved by using an HTML attribute in the loaded content (rather than setting some sort of UIWebView property), e.g.
<html>
<body>
<h1 datadetectors="off">Header text with number 9123 3456</h1>
<p>Body text with number 9872 4567</p>
</body>
</html>
In this example, the number in the <p> would be detected as a phone number due to setting webview.dataDetectorTypes = UIDataDetectorTypeAll, whereas the number in the <h1> would not.
you should use <meta name = "format-detection" content = "telephone=no">
Hope it helps
you can put the attribute
x-apple-data-detectors="false"
but unfortunately this seems to work only for tags.
I ended up using this solution:
666-777-777
besides disabling the telephone numbers "detection", this also prevents adresses and other detection to run.
If you control the web content you can use jscript (via jquery) to write your own data detectors. If you don't control the content you could insert and execute the jscript using stringByEvaluatingJavaScriptFromString: once webViewDidFinishLoad: is called.
In WKWebView Disable all Data Detector Types in Attributes inspector. This will solve your problem
Since an "a" tag will be inserted for you with the x-apple-data-detectors in it, you could write the tag yourself with x-apple-data-detectors set to false.
Original code:
<div class="my_time">17:02</div>
will be transformed to:
<div class="my_time">
<a href="x-apple-data-detectors://1" dir="ltr"
x-apple-data-detectors="true"
x-apple-data-detectors-type="calendar-event"
x-apple-data-detectors-result="1"
style="color: rgb(169, 169, 169);
text-decoration-color: rgba(169, 169, 169, 0.258824);">14:18
</a>
</div>
You can prevent this by writing your code as following...
<div class="my_time">
<a x-apple-data-detectors="false" style="text-decoration: none">17:02</a>
</div>