{"_id":"54380c2df15a8e1400831f88","githubsync":"","is_link":false,"user":"542979b61215fe08007e0ee4","version":{"_id":"542979c51215fe08007e0ee8","project":"542979c51215fe08007e0ee5","__v":4,"createdAt":"2014-09-29T15:24:53.437Z","releaseDate":"2014-09-29T15:24:53.437Z","categories":["542979c51215fe08007e0ee9","542985897a6b690800767fab","5429898d1215fe08007e0fe6","542ac5aa54d88d140075fcaf"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"__v":7,"project":"542979c51215fe08007e0ee5","parentDoc":null,"category":{"_id":"5429898d1215fe08007e0fe6","pages":["5429ad872e366c080086b5c6","5429cb1b2e366c080086b777","542db0adcb19820800c1f4a3","54380c2df15a8e1400831f88","542aee7d54d88d140075ff00","542af02f54d88d140075ff14","542f14abacabcf080095953b","54651c6df42a472000b0c611","55f81b4f59eace0d0087db2b","56b0c5d81486990d009c101a","56babbffc275570d00ce7105"],"project":"542979c51215fe08007e0ee5","version":"542979c51215fe08007e0ee8","__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-09-29T16:32:13.661Z","from_sync":false,"order":1,"slug":"helpers","title":"Helpers"},"updates":["5a12c84eb638b80026a0c81e"],"next":{"pages":[],"description":""},"createdAt":"2014-10-10T16:41:17.531Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"basic_auth":false,"results":{"codes":[]},"settings":"","try":true,"auth":"never","params":[],"url":""},"isReference":false,"order":6,"body":"Inkcite's built-in `{a}` helper streamlines working with links in your email by keeping your code DRY and tagging `href`s if desired.\n\nEvery link requires an `id` attribute.  Using an ID for the first time automatically associates the corresponding `href` with it.  If you add another `{a}` tag with the same ID, Inkcite will automatically reuse the URL you previously associated with that ID.  This keeps your email code DRY.  If you ever need to change the destination of a link, you only need to update it once.  Here's an example:  \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{a id=\\\"order-now\\\" href=\\\"http://company.com/order/\\\"}Buy now!{/a}\\n...\\n{a id=\\\"order-now\\\"}Order today!{/a}\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nWith minification disabled, running `inkcite build` would generate the following HTML:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<a href=\\\"http://company.com/order/\\\" style=\\\"color:#0099cc;text-decoration:none\\\" target=_blank>Buy now!</a>\\n...\\n<a href=\\\"http://company.com/order/\\\" style=\\\"color:#0099cc;text-decoration:none\\\" target=_blank>Order today!</a>\",\n      \"language\": \"html\",\n      \"name\": \"build/email.html\"\n    }\n  ]\n}\n[/block]\nAs you can see, Inkcite automatically populates the `href` tag for any link that uses a previously defined ID.  You'll also notice that Inkcite sets all links to `target=_blank` and styles every link so that underlines are removed and they're a consistent color.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note!\",\n  \"body\": \"Link IDs are shared with the `{button}` helper.  Once defined using either tag, the ID can be used repeatedly throughout your email as either text links or buttons.\"\n}\n[/block]\n# Link Color & Font\n\nBy default, Inkcite will look for a `#link` color declaration in your `helpers.tsv` file.  By defining this, you are setting the default color for all of the links in your email.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#link\\t#09c\",\n      \"language\": \"text\",\n      \"name\": \"helpers.tsv\"\n    }\n  ]\n}\n[/block]\nYou can always override the link's color using the appropriately-named `color` attribute.  Here's an example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{a id=\\\"order-now\\\" href=\\\"http://company.com/order/\\\"}Default link color{/a}\\n...\\n{a id=\\\"order-now\\\" color=#900}Dark red link{/a}\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nThe `{a} helper also supports the full array of [Font](doc:fonts) attributes so you can customize family, line-height, size, weight and more for any specific link.  For example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{a id=\\\"order-now\\\" font-size=32 font-weight=bold}BUY NOW{/a}\\n...\\n{a id=\\\"contact-us\\\" font=large}\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\n# Tagging\n\nInkcite can be configured to automatically tag every link in your email with custom query data.  This makes it easy to pull performance data from your website's logs or analytics package.  Link tagging is enabled in the `config.yml` file:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"# Tag every link in the email\\ntag-links: \\\"source=fall14_newsletter\\\"\",\n      \"language\": \"ruby\",\n      \"name\": \"config.yml\"\n    }\n  ]\n}\n[/block]\nWhen you run `inkcite build` the generated HTML for one of the links defined above would look like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<a href=\\\"http://company.com/order/?source=fall14_newsletter\\\" style=\\\"color:#0099cc;text-decoration:none\\\" target=_blank>Order today!</a>\",\n      \"language\": \"html\",\n      \"name\": \"build/email.html\"\n    }\n  ]\n}\n[/block]\nIf you'd like to track exactly which links are being clicked, include `{id}` somewhere in the `tag-links` declaration and during the build process, Inkcite will include the link's ID in the string.  For example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"# Tag every link in the email and include the link's ID\\ntag-links: \\\"source=fall14_newsletter_{id}\\\"\",\n      \"language\": \"yaml\",\n      \"name\": \"config.yml\"\n    }\n  ]\n}\n[/block]\nNow you can track not only which email brought recipients to your website but also which link they clicked to get there.  The resulting HTML would look like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<a href=\\\"http://company.com/order/?source=fall14_newsletter_order-now\\\" style=\\\"color:#0099cc;text-decoration:none\\\" target=_blank>Order today!</a>\",\n      \"language\": \"html\",\n      \"name\": \"build/email.html\"\n    }\n  ]\n}\n[/block]","excerpt":"Responsive-ready anchor tags with built-in tagging and tracking","slug":"links","type":"basic","title":"Links"}

Links

Responsive-ready anchor tags with built-in tagging and tracking

Inkcite's built-in `{a}` helper streamlines working with links in your email by keeping your code DRY and tagging `href`s if desired. Every link requires an `id` attribute. Using an ID for the first time automatically associates the corresponding `href` with it. If you add another `{a}` tag with the same ID, Inkcite will automatically reuse the URL you previously associated with that ID. This keeps your email code DRY. If you ever need to change the destination of a link, you only need to update it once. Here's an example: [block:code] { "codes": [ { "code": "{a id=\"order-now\" href=\"http://company.com/order/\"}Buy now!{/a}\n...\n{a id=\"order-now\"}Order today!{/a}", "language": "html", "name": "source.html" } ] } [/block] With minification disabled, running `inkcite build` would generate the following HTML: [block:code] { "codes": [ { "code": "<a href=\"http://company.com/order/\" style=\"color:#0099cc;text-decoration:none\" target=_blank>Buy now!</a>\n...\n<a href=\"http://company.com/order/\" style=\"color:#0099cc;text-decoration:none\" target=_blank>Order today!</a>", "language": "html", "name": "build/email.html" } ] } [/block] As you can see, Inkcite automatically populates the `href` tag for any link that uses a previously defined ID. You'll also notice that Inkcite sets all links to `target=_blank` and styles every link so that underlines are removed and they're a consistent color. [block:callout] { "type": "info", "title": "Note!", "body": "Link IDs are shared with the `{button}` helper. Once defined using either tag, the ID can be used repeatedly throughout your email as either text links or buttons." } [/block] # Link Color & Font By default, Inkcite will look for a `#link` color declaration in your `helpers.tsv` file. By defining this, you are setting the default color for all of the links in your email. [block:code] { "codes": [ { "code": "#link\t#09c", "language": "text", "name": "helpers.tsv" } ] } [/block] You can always override the link's color using the appropriately-named `color` attribute. Here's an example: [block:code] { "codes": [ { "code": "{a id=\"order-now\" href=\"http://company.com/order/\"}Default link color{/a}\n...\n{a id=\"order-now\" color=#900}Dark red link{/a}", "language": "html", "name": "source.html" } ] } [/block] The `{a} helper also supports the full array of [Font](doc:fonts) attributes so you can customize family, line-height, size, weight and more for any specific link. For example: [block:code] { "codes": [ { "code": "{a id=\"order-now\" font-size=32 font-weight=bold}BUY NOW{/a}\n...\n{a id=\"contact-us\" font=large}", "language": "html", "name": "source.html" } ] } [/block] # Tagging Inkcite can be configured to automatically tag every link in your email with custom query data. This makes it easy to pull performance data from your website's logs or analytics package. Link tagging is enabled in the `config.yml` file: [block:code] { "codes": [ { "code": "# Tag every link in the email\ntag-links: \"source=fall14_newsletter\"", "language": "ruby", "name": "config.yml" } ] } [/block] When you run `inkcite build` the generated HTML for one of the links defined above would look like this: [block:code] { "codes": [ { "code": "<a href=\"http://company.com/order/?source=fall14_newsletter\" style=\"color:#0099cc;text-decoration:none\" target=_blank>Order today!</a>", "language": "html", "name": "build/email.html" } ] } [/block] If you'd like to track exactly which links are being clicked, include `{id}` somewhere in the `tag-links` declaration and during the build process, Inkcite will include the link's ID in the string. For example: [block:code] { "codes": [ { "code": "# Tag every link in the email and include the link's ID\ntag-links: \"source=fall14_newsletter_{id}\"", "language": "yaml", "name": "config.yml" } ] } [/block] Now you can track not only which email brought recipients to your website but also which link they clicked to get there. The resulting HTML would look like this: [block:code] { "codes": [ { "code": "<a href=\"http://company.com/order/?source=fall14_newsletter_order-now\" style=\"color:#0099cc;text-decoration:none\" target=_blank>Order today!</a>", "language": "html", "name": "build/email.html" } ] } [/block]