Skip to main content

Campaign Engagement to Google Analytics

Published Date

Interaction Studio (IS) has a set of campaign reports that are valuable when looking at the impact of a campaign on a user's behavior. Details on the out of the box reports can be found in the documentation. At times though, you may want to send the engagement (impression, click, dismissal) events to Google Analytics where they can be analyzed next to campaign data from other channels. You may also then send the data from GA to Datorama, Google Data Studio, or other systems.

A general note: Example calls and data structures are provided as reference only below. You should always discuss the format and data elements with your analytics team so that a robust end-to-end solution can be designed and built.

Also note that while the focus of this guide is on Google tools, the same can apply for Adobe or any other analytics solution.
 

Data Layer

The best option for exposing IS campaign data is by using the template system to send events into the data layer.

In your web template, there is an apply() function which is responsible for rendering the content on the screen. Inside of this, place a dataLayer.push() statement that sends the impression event when the template renders.

function apply(context, template) {
    /*
    * main code to render experience here
    */
    //send impression event
    window.dataLayer.push({
        'event': "IS Impression",
        'campaign_id': context.campaign,
        'experience_id': context.experience
    });
}

You can also add in an event for click or dismissal (not shown).

function apply(context, template) {
    /*
    * main code to render experience here
    */
    //send impression event
    window.dataLayer.push({ ... removed for length ...});
    
    //set up listener for click event
    Evergage.cashDom('.evg-cta').on("click", () => {
        window.dataLayer.push({
            'event': "IS Click",
            'campaign_id': context.campaign,
            'experience_id': context.experience
        });
    })
}


Available Data

In the template system there are a few standard fields that can be provided to the data layer but additional fields can be defined.

context.campaign: Holds the Campaign ID which can be seen in the Web Campaigns overview screen by clicking on a campaign. context.experience: Will contain the Experience ID and is more granular than the Campaign ID, since a campaign can have multiple experiences. This can also be seen on the Web Campaign screen by viewing the details of a campaign. context.userGroup: Use this to determine if the individual was in the test or control group. Values of Test and Control will be passed here. See more about control groups later.

Template Name: There is not a built in variable to include the template name, but since the code lives in the template you could just hardcode that directly into the template. const templateName = 'Awesome Product Recommendations 4-Col'

Campaign Name & Experience Name: Unfortunately the name of the campaign or the experience are not available. Only the IDs are. However, you can add custom field(s) to the server side tab for the purpose of sending the data to a data layer. For example, on the Serverside tab you could add a field to store both the campaign name and experience name:

export class SomeTemplateName implements CampaignTemplateComponent {
    @title("GA Campaign Name")
    @subtitle("Value to sent to the data layer as the name of the campaign for analytics purposes.")
    gaCampaignName: string;
    
    @title("GA Experience Name")
    @subtitle("Value to sent to the data layer as the name of the experience for analytics purposes.")
    gaExperienceName: string;
}
Then in your apply() function of the Clientside Code, just reference those as any other variable: context.gaCampaignName and context.gaExperienceName

Content: Keep in mind that any fields that are available when using the template in a campaign are also available. For example, if you are swapping out a hero image you may want to pass the image name or URL over. In your Serverside code let's say you have a field backgroundImageURL defined, you can reference that in the Clientside code as context.backgroundImageURL and add that to the data layer.

Catalog Data: If you use the eCommerce tracking in Google Analytics or Google Tag Manager, you may want to send in product details to the data layer in an eComm format. Or you may just want to send other catalog information in. You can access those items coming from the Recipes system using the context.products array. Example using the recipe data, although not in eCommerce format:

function apply(context, template) {
    /*
    * main code to render experience here
    */
    //send impression event
    let prods = context.products.map( (prod) => { return {id: prod.id, name: prod.attributes.name.value, price: prod.attributes.price.value}});
    window.dataLayer.push({
        'event': "IS Product Recs",
        'products': prods
    });
}


Control Groups

You will need to decide if you want to pass an event for a control group. In general, it would be a good practice to send control group information but use a different format so that analytics can be run on the test group vs control group. An example:

function apply(context, template) {
    if (context.userGroup === "Test") {
        window.dataLayer.push({
            'event': "IS Impression",
            'campaign_id': context.campaign,
            'experience_id': context.experience
        });
    } else if (context.userGroup === "Control"){
        window.dataLayer.push({
            'event': "IS Control Group",
            'campaign_id': context.campaign,
            'experience_id': context.experience
        });
    }
}


Data Layer to Google Analytics

Using a data layer to pass events into Google Analytics is always a good idea. A data layer provides a stable middle layer that allows changes in tools or the website to not impact analytics downstream, and allows analytics teams to make changes to the mapping of data into analytics without requiring changes to all tools pushing in events. As long as a stable format is agreed upon, all teams can ensure changes are isolated to a single tool or platform.

Once events are pushed into the data layer, those events can be mapped into Google Analytics using Google Tag Manager. GTM ties in well as the mechanism to pass the data cleanly into GA as it's added to the data layer. I will not dive into the "how" in this guide, but there are many guides on the Internet on this topic.

 

Direct to Google Analytics (No Data Layer)

If you do not use a data layer or would prefer not to add this information in, calls can be made directly to GA. The exact call and format would need to be determined based on what version of GA you are using (gtag, universal analytics, ga4, etc), but a brief example would be:

function apply(context, template) {
    /*
    * main code to render experience here
    */
    //send impression event
    ga('send', {
      hitType: 'event',
      eventCategory: 'IS Banner',
      eventAction: 'impression',
      eventLabel: 'image.jpg'
    });
}