Add the purchase-details variable to your Floodlight tags or event snippets

After your web developer writes code to populate the purchase-details variable, you’ll need to update your Floodlight tags or event snippets so they can pass the data to Search Ads 360.

If you use Google Tag Manager, you'll need to update your container to use the data you pushed to the ecommerce.purchase.products array or create macros that pass the data to your Floodlight tag.

Manually update your tags

If you're passing purchase details directly to a Floodlight tag, most likely, your web developer has made the purchase-details variable available to the page in a JavaScript object or as a custom variable in the DOM.

For example, let’s say your web developer makes the purchase details available in a JavaScript object named floodlightSpec. You’d need to update your Floodlight event snippet to look like this:

<!--
Event snippet for Thank You on http://example.com/thanks: Please do not remove.
Place this snippet on pages with events you’re tracking. 
Creation date: 11/01/2017
-->
<script>
  gtag('event', 'purchase', 
    {
      'allow_custom_scripts': true,
      'send_to': 'DC-1234567/group1/thank123+transactions',
      'transaction_id': floodlightSpec.sessionID,
      'value': floodlightSpec.revenue,
      'items': [
        {  'id': floodlightSpec.item[0].id,
           'price': floodlightSpec.item[0].price,
           'quantity': floodlightSpec.item[0].number 
        },
        {  'id': floodlightSpec.item[1].id,
           'price': floodlightSpec.item[1].price,
           'quantity': floodlightSpec.item[1].number 
        }
      ],
      'country': floodlightSpec.country,
      'language': floodlightSpec.lang
    }
);
</script>
<noscript>
<img src="https://ad.doubleclick.net/ddm/activity/src=1234567;type=group1;cat=thank123;
qty=1;cost=floodlightSpec.revenue;dc_lat=;dc_rdid=;
tag_for_child_directed_treatment=;tfua=;npa=;
ord=floodlightSpec.sessionID;prd=i1:floodlightSpec.item[0].id|p1:floodlightSpec.item[0].price|q1:floodlightSpec.item[0].number|i2:floodlightSpec.item[1].id|p2:floodlightSpec.item[1].price|q2:floodlightSpec.item[1].number|c:floodlightSpec.country|l:floodlightSpec.lang?" width="1" height="1" alt="">
</noscript>
<!-- End of event snippet: Please do not remove -->

Note: Event snippets generated by Search Ads 360 include an optional <noscript> tag that contains a Floodlight image tag. This tag is used to report conversions in browsers that don't support JavaScript. If your site supports browsers that haven't enabled JavaScript, it's recommended that you update the Floodlight image tag to include purchase details as shown in the example.

Use Google Tag Manager to update your tags

Google Tag Manager helps you maintain tags on your site. Instead of adding and updating tags directly on your site, you add and update them in Google Tag Manager. Google Tag Manager then outputs properly formatted tags on your site as needed. Learn more about Google Tag Manager.

When you need to pass dynamically generated data—such as purchase details—to tags managed by Google Tag Manager, your web developer can do either of the following:

Use data from the data layer

If your web developer has made the purchase-details variable available in the data layer, follow these steps to pass the data to your Floodlight tag:

• Use the dataLayer.push method to make the data available in Google Tag Manager's data layer.

1. In Google Tag Manager, navigate to the container for your site.

2. Click the Tags tab and click the Floodlight transaction tag that reports sales.

3. Click the Pencil icon to make changes to the tag.

4. Under Product Reporting, check the Provide product-level sales data​ check box.

5. From the Data Source list, select Data Layer.
   Google Tag Manager will automatically use the data pushed to the data layer in the ecommerce.purchase.products array.

6. Click Save.

7. Preview and publish your changes.

Use a variable to access other data

If your web developer has made the purchase-details variable available somewhere other than the data layer, follow these steps to use a Google tag manager variable (formerly Macro) to pass the data on.

• Output the data elsewhere (such as in a DOM variable).

1. In Google Tag Manager, navigate to the container for your site.

2. Click the Tags tab and click the Floodlight transaction tag that reports sales.

3. Click the Pencil icon to make changes to the tag.

4. Under Product Reporting, check the Provide product-level sales data​ check box.

5. From the Data Source list, select one of the following:

   • JavaScript variable if the data is formatted as a JavaScript variable.

   • Floodlight formatted value if the data is formatted as a String.

6. Click the Add variable icon next to the Product Data Field.

7. Click the New variable button in the upper right.

8. Click the Pencil icon in the variable configuration card and do the following:

   1. Choose the appropriate variable type. For example, if the data is available in a JavaScript variable, select JavaScript Variable.

   2. In the next field, enter the name of the object that contains the data.

      For example, here's a page that outputs the String as a global JavaScript variable.

      <script> window.salesData="i1:sku-12345|p1:100.0|q1:1|i2:sku-67890|p2:20.0|q2:2" </script>

       

9. Name the variable either by editing the namespace at the top, or by clicking save and editing the name in the following window. After doing this, you should see the name enclosed in double brackets in the Product Data Field.

10. Click Save again to update the draft version of your tag.

11. Preview and publish your changes.