{"_id":"5ab565f112d24900747242a4","category":{"_id":"5ab565f112d249007472429a","version":"5ab565f112d2490074724298","project":"57c88b374434350e00509d7f","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-30T22:04:21.938Z","from_sync":false,"order":1,"slug":"guides","title":"Guides"},"parentDoc":null,"user":"545a811ebf1d2b0e00aaa1f2","project":"57c88b374434350e00509d7f","version":{"_id":"5ab565f112d2490074724298","project":"57c88b374434350e00509d7f","__v":1,"createdAt":"2018-03-23T20:39:13.299Z","releaseDate":"2018-03-23T20:39:13.299Z","categories":["5ab565f112d2490074724299","5ab565f112d249007472429a","5ab565f112d249007472429b","5ab565f112d249007472429c"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"3.6.0","version":"3.6.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-10-12T20:56:54.924Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":7,"body":"Follow these easy few steps to personalize the onboarding experience for users installing from your mobile website! In this example we'll create a Primer flow for a specific source that spotlights dynamic products based on the URL.\n\nBefore getting started, make sure you have the [Primer iOS SDK integrated](doc:quick-start).\n\n1. [Build Dynamic Flow](#1-build-dynamic-flow)\n2. [Grab the Targeting key](#2-grab-the-targeting-key)\n3. [Generate Smart Links](#3-generate-smart-links)\n\nNeed help or have questions? Don't hesitate to [Contact Us](doc:contact-us)!\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Build Dynamic Flow\"\n}\n[/block]\nGo to the <a href=\"http://goprimer.com/dashboard\" target=\"_blank\">Dashboard</a> and create a new flow. Set the Targeting to `Web To Mobile Download Links` and then select a theme. In this example we use `Bazaar`.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/qznaT6QDSWS1dNhriytE_dynamic_setup.png\",\n        \"dynamic_setup.png\",\n        \"1470\",\n        \"734\",\n        \"#34aab4\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nAfter creating the flow, we're going to add a new screen. We will choose one that focuses on a product. We replace the main image and product description with dynamic properties that are filled based on the link. Then we'll modify the main CTA's button action to be a Deep Link that takes the user to the product to purchase.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/I6sk4NYTOKlhQgP3ZPFb_dynamic_build.png\",\n        \"dynamic_build.png\",\n        \"1470\",\n        \"734\",\n        \"#255a5f\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2. Grab the Targeting key\"\n}\n[/block]\nNow we need to go grab the Targeting key to be used to generate Smart Links for this Primer flow. Find your new `Web To Mobile Download Links` targeting and edit it to bring up the configuration popup. Copy the `TARGETING KEY` for the next step.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/1bJ2YNkbTqG26so24EUQ_dynamic_key.png\",\n        \"dynamic_key.png\",\n        \"1470\",\n        \"734\",\n        \"#37a3ac\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nIf you havent specified your App Store URL yet, set one either in your <a href=\"http://goprimer.com/dashboard#/project//edit?tab=appStoreURLs\" target=\"_blank\">Project Settings</a> or on the Targeting itself.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/28iADDjQQK5ZRvL47ziX_dynamic_url.png\",\n        \"dynamic_url.png\",\n        \"1470\",\n        \"734\",\n        \"#f83d3d\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3. Generate Smart Links\"\n}\n[/block]\nThe flow we created above required 3 pieces of dynamic information:\n- the details of the item - `item_details`,\n- the image of the item - `item_image`,\n- and the identifier of the item - `item_id`.\n\nWe will easily generate a Smart Link using the server API with the necessary pieces of information in addition to the Targeting key we found above, and our SDK token that you can find in your <a href=\"http://goprimer.com/dashboard#/project//edit\" target=\"_blank\">Project Settings</a>.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"curl -H \\\"Content-Type: application/json\\\" -X POST -d '{\\\"token\\\":\\\"[[app:token]]\\\",\\\"targeting\\\":\\\"WEBTOMOBIL\\\",\\\"additional_params\\\":{\\\"item_details\\\" : \\\"Christmas Sweater T-Shirt for $8\\\", \\\"item_image\\\" : \\\"http://cdn.goprimer.com/PrimerDemo/Christmas.jpg\\\", \\\"item_id\\\":\\\"238145\\\"}}' https://goprimer.com/tracking_link\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"You're Done!\"\n}\n[/block]\nWhen your user clicks the link on mobile web and installs the app, they'll see a flow customized for the product they clicked to buy. \n\nPrimer partner apps have increased purchase conversion by 50%-300% with these personalized experiences.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/M8fg3yzATsiVlIp52a8M_dynamic_final.png\",\n        \"dynamic_final.png\",\n        \"1470\",\n        \"734\",\n        \"#7f3b44\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Image not showing up?\",\n  \"body\": \"Make sure any non-HTTPS image domain you use here is whitelisted in the info plist of your iOS app.\\nOtherwise it may not show up correctly on iOS 9 and above.\"\n}\n[/block]\nCheck out [Attribution](doc:attribution) for more information regarding Smart Links!","excerpt":"","slug":"dynamic-screens-guide","type":"basic","title":"Dynamic Web to Mobile Guide"}

Dynamic Web to Mobile Guide


Follow these easy few steps to personalize the onboarding experience for users installing from your mobile website! In this example we'll create a Primer flow for a specific source that spotlights dynamic products based on the URL. Before getting started, make sure you have the [Primer iOS SDK integrated](doc:quick-start). 1. [Build Dynamic Flow](#1-build-dynamic-flow) 2. [Grab the Targeting key](#2-grab-the-targeting-key) 3. [Generate Smart Links](#3-generate-smart-links) Need help or have questions? Don't hesitate to [Contact Us](doc:contact-us)! [block:api-header] { "type": "basic", "title": "1. Build Dynamic Flow" } [/block] Go to the <a href="http://goprimer.com/dashboard" target="_blank">Dashboard</a> and create a new flow. Set the Targeting to `Web To Mobile Download Links` and then select a theme. In this example we use `Bazaar`. [block:image] { "images": [ { "image": [ "https://files.readme.io/qznaT6QDSWS1dNhriytE_dynamic_setup.png", "dynamic_setup.png", "1470", "734", "#34aab4", "" ] } ] } [/block] After creating the flow, we're going to add a new screen. We will choose one that focuses on a product. We replace the main image and product description with dynamic properties that are filled based on the link. Then we'll modify the main CTA's button action to be a Deep Link that takes the user to the product to purchase. [block:image] { "images": [ { "image": [ "https://files.readme.io/I6sk4NYTOKlhQgP3ZPFb_dynamic_build.png", "dynamic_build.png", "1470", "734", "#255a5f", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "2. Grab the Targeting key" } [/block] Now we need to go grab the Targeting key to be used to generate Smart Links for this Primer flow. Find your new `Web To Mobile Download Links` targeting and edit it to bring up the configuration popup. Copy the `TARGETING KEY` for the next step. [block:image] { "images": [ { "image": [ "https://files.readme.io/1bJ2YNkbTqG26so24EUQ_dynamic_key.png", "dynamic_key.png", "1470", "734", "#37a3ac", "" ] } ] } [/block] If you havent specified your App Store URL yet, set one either in your <a href="http://goprimer.com/dashboard#/project//edit?tab=appStoreURLs" target="_blank">Project Settings</a> or on the Targeting itself. [block:image] { "images": [ { "image": [ "https://files.readme.io/28iADDjQQK5ZRvL47ziX_dynamic_url.png", "dynamic_url.png", "1470", "734", "#f83d3d", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "3. Generate Smart Links" } [/block] The flow we created above required 3 pieces of dynamic information: - the details of the item - `item_details`, - the image of the item - `item_image`, - and the identifier of the item - `item_id`. We will easily generate a Smart Link using the server API with the necessary pieces of information in addition to the Targeting key we found above, and our SDK token that you can find in your <a href="http://goprimer.com/dashboard#/project//edit" target="_blank">Project Settings</a>. [block:code] { "codes": [ { "code": "curl -H \"Content-Type: application/json\" -X POST -d '{\"token\":\"[[app:token]]\",\"targeting\":\"WEBTOMOBIL\",\"additional_params\":{\"item_details\" : \"Christmas Sweater T-Shirt for $8\", \"item_image\" : \"http://cdn.goprimer.com/PrimerDemo/Christmas.jpg\", \"item_id\":\"238145\"}}' https://goprimer.com/tracking_link", "language": "shell" } ] } [/block] [block:api-header] { "type": "basic", "title": "You're Done!" } [/block] When your user clicks the link on mobile web and installs the app, they'll see a flow customized for the product they clicked to buy. Primer partner apps have increased purchase conversion by 50%-300% with these personalized experiences. [block:image] { "images": [ { "image": [ "https://files.readme.io/M8fg3yzATsiVlIp52a8M_dynamic_final.png", "dynamic_final.png", "1470", "734", "#7f3b44", "" ] } ] } [/block] [block:callout] { "type": "warning", "title": "Image not showing up?", "body": "Make sure any non-HTTPS image domain you use here is whitelisted in the info plist of your iOS app.\nOtherwise it may not show up correctly on iOS 9 and above." } [/block] Check out [Attribution](doc:attribution) for more information regarding Smart Links!