Setting up the Direct Update Image Tag and Adding It to Your Site

Once you have a clear understanding of how the Direct Update URL works, you can begin setting up Direct Update.

Procedure

  1. Go to Settings > Platform Settings > Data Exchange.
  2. Check the Enable Direct Update for updating contact fields box.
  3. Add the Direct Update img tag to a page on your site.
    Warning: If you are using a private domain, Direct Update cookies will be set after a contact clicks a link and before the contact is redirected to your customer site. The following actions should be avoided in order to ensure that Direct Update will work properly:
    • Changing the domain in the Direct Update img tag src attribute.
    • Changing the URL in the Direct Update img tag src attribute to use https if you do not have a https license for your sending domain (Example: mail.company.com). Changing this URL to https will cause Direct Update to no longer work without a SSL certificate. Learn how to work with Bronto to set up a SSL certificate.
  4. Add parameters to the Direct Update URL which correspond to fields you want to update.

    For more information on using operators and adding field data to the Direct Update URL, see Adding Field Data to the Direct Update URL.

  5. Add values to the field parameter(s).
    There are a number of ways you can accomplish this, with the most common being using JavaScript. The example below is of a page displayed to a contact after they have filled out a form (linked to from an email you sent them from the application) allowing them to update the messages they want to receive from you. The page contains a message confirming the data the person provided/selected (the example below assumes they entered in their first name, last name, number of emails they want to receive per month, and type of emails they want to receive). The page also contains the direct update img tag, and some JavaScript that populates the Direct Update URL with the appropriate data.
    Note: In order for Direct Update to work, a cookie needs to have been set in the contact's browser by the application. The cookie is used to identify the contact so the application knows which contact to update. A cookie is set in a contacts browser when:
    • A contact clicks a link in an email you send them from the application.
    • A contact is added to your account via Direct Add and you have the Create Tracking Cookie box checked.
    • A contact is added to your account via an Add Contacts webform and you have the Create Tracking Cookie box checked in the from settings.
    The cookie will remain for 20 years, provided the contact does not clear the cookies in their browser.
    You may need to scroll to the right to see the entire code example below:
    
    
    <html>
    <body>
    	<p>
    		Dear <span id="firstname">Joe</span><span id="lastname">Example</span>,
    	</p>
    	<p>
    		Thank you for signing up to receive messages from Example Entertainment News. You signed up to receive
    		<span id="emailfrequency">3</span> emails per month about:
    	</p>
    	<ul>
    		<li>
    			<span id="contentpref1">Movies</span>
    		</li>
    		<li>
    			<span id="contentpref2">Music</span>
    		</li>
    		<li>
    			<span id="contentpref3">Sports</span>
    		</li>
    	</ul>
    
    <script type="text/javascript">
    	// The following variables need to be set to some value that is
    	// available on the page, passed in, etc. Where you get these
    	// values will be different for each client's web site. Someone
    	// who is familiar with the client's web site will have to provide
    	// the values based on the type of page (order confirmation,
    	// receipt, etc.) shown to users after a form has been filled out.
    
    	var firstname = document.getElementById('firstname').innerHTML;
    	var lastname = document.getElementById('lastname').innerHTML;
    	var emailfrequency = document.getElementById('emailfrequency').innerHTML;
    	var contentpref1 = document.getElementById('contentpref1').innerHTML;
    	var contentpref2 = document.getElementById('contentpref2').innerHTML;
    	var contentpref3 = document.getElementById('contentpref3').innerHTML;
    
    	// Note the incrementing number for the field and list parameters
    	// (field1....field2.....field3) etc.
    
    	// Note the different operators (set and appendifnew) used in
    	// the Direct Update URL.
    
    	// Make sure you get the proper Direct Update img tag from the
    	// Data Exchange page in your account. The img tag below uses
    	// a generic img tag.
    
    	document.writeln('<img src="http://public_domain/public/?q=direct_update&fn=Public_DirectUpdateForm&id=blkycggbjquivddbiddxylaufhfdbk&field1=firstname,set,'+firstname+'&field2=lastname,set,'+lastname+'&field3=emailfrequency,set,'+emailfequency+'&field4=contentpref1,appendifnew,'+contentpref1+'&field5=contentpref2,appendifnew,'+contentpref2+'&field6=contentpref3,appendifnew,'+contentpref3+'" width="0" height="0" border="0"/>');
    </script>
    </body>
    </html>